이번에 프로젝트를 진행하면서 알게 된 e.currentTarget 와 e.target의 차이점을 정리해보려고 합니다.
MDN 문서 에서는 다음과 같이 e.currentTarget의 정의를 내리고 있습니다.
The currentTarget read-only property of the Event interface identifies the current target for the event, as the event traverses the DOM. It always refers to the element to which the event handler has been attached, as opposed to Event.target, which identifies the element on which the event occurred and which may be its descendant.
쉽게 풀어쓰자면 e.currentTarget 은 말 그대로 이벤트가 걸려있는 현재 대상을 나타내는 것이라고 보시면 됩니다.
여기에서 중요한 것은 현재 대상이라는 점입니다.
만약 상위 요소에 이벤트를 걸어놓은 상태에서 하위요소를 클릭할 경우 e.target 은 하위 요소를 가리키지만 e.currentTarget의 해당 이벤트가 걸려있는 상위요소를 가리키게 됩니다.
예시와 함께 살펴보면,
<div class="Wrap">
Wrap
<div class="item">item</div>
</div>
//javascript
const Wrap = document.querySelector('.Wrap');
Wrap.addEventListener('click', (e) => {
console.log('target', e.target.className);
console.log('currentTarget', e.currentTarget.className);
})
위에서 설명한 것과 같이 상위요소인 Wrap에 이벤트가 걸려있으며, 노란색 영역인 item을 클릭 시
과 같은 결과가 나타나게 됩니다. 그 이유는 e.target은 이벤트 위임으로 인해 하위 이벤트가 상위로 전파가 되어 item이 나타나게 된 반면 e.currentTarget의 경우는 이벤트가 걸려있는 대상인 Wrap을 가리키고 있기 때문입니다.
이번 프로젝트에서 활용한 부분 역시 위와 같습니다.
이번에 디테일 페이지를 진행하게 되면서 디테일 페이지의 옵션을 작업하던 중, e.target.className을 통해 Size의 클래스이름과 Quantity의 클래스 이름에 차이를 두어 서로 다른 모달창이 뜨게 하려고 했었습니다.
하지만 이 때 e.target.className을 통해 접근을 하게 될 경우 이벤트 위임이 발생하게 되어 만약 검정색 영역을 클릭할 경우 해당 영역만 알 수 있고 필요한 부분이었던 빨간색 영역에 대한 클래스 이름은 알 수가 없었습니다.
따라서 클릭이벤트가 걸려있는 요소의 클래스명만을 가져오기 위해 빨간색 테두리 영역에 이벤트를 걸어 e.currentTarget을 활용할 수 있었고 원하는 결과를 얻을 수 있었습니다.
그동안은 e.currentTarget의 필요성을 느끼지 못해 예전에 대충 보고 지나갔었는데 이번에 프로젝트를 하며 확실히 그 차이점에 대해 알 수 있었습니다. 지금 당장은 그 개념이 필요치 않다 하더라도 한 번 볼때 제대로 짚고 넘어가는 습관을 들여야겠다는 생각이 드네요
