[PROJECT-JULABO-JavaScript] e.currentTarget
이번에 프로젝트를 진행하면서 알게 된 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
의 필요성을 느끼지 못해 예전에 대충 보고 지나갔었는데 이번에 프로젝트를 하며 확실히 그 차이점에 대해 알 수 있었습니다. 지금 당장은 그 개념이 필요치 않다 하더라도 한 번 볼때 제대로 짚고 넘어가는 습관을 들여야겠다는 생각이 드네요
Author And Source
이 문제에 관하여([PROJECT-JULABO-JavaScript] e.currentTarget), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@seokkitdo/JavaScript-e.currentTarget저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)