이번 포스트에서는 이벤트의 currentTarget과 target의 차이점에 대해 다뤄보겠습니다.
outer 박스(div) 안에 inner 박스(span)가 있습니다. 각 요소에 addEventListener를 달아줌으로써 요소를 클릭하면 해당 요소의 이벤트 currentTarget과 target이 출력되도록 하였습니다.
<div class="outer">
<span class="inner"></span>
</div>const outer = document.querySelector('.outer');
const inner = document.querySelector('.inner');
outer.addEventListener('click', (event) => {
console.log(`outer: ${event.currentTarget}, ${event.target}`);
});
inner.addEventListener('click', (event) => {
console.log(`inner: ${event.currentTarget}, ${event.target}`);
});우선, currentTarget과 target의 차이점은 아래와 같습니다.
e.currentTarget : 이벤트 리스너가 달린 요소
e.target : 실제로 이벤트가 발생하는 요소
위의 코드를 실행해 보며 직접 확인해 보겠습니다.
먼저, inner 박스를 클릭해 보면
- inner 박스의 e.currentTarget = span, e.target = span
- outer 박스의 e.currentTarget = div, e.target = span
inner 박스를 클릭하면 실제 클릭 이벤트가 발생하는 요소는 inner 박스인 span 태그이지만 이벤트 리스너가 달린 요소는 다를 수 있습니다.
- inner 박스에서의 e.currentTarget은 이벤트 리스너가 달린 span 태그이고, e.target은 이벤트가 실제로 발생한 span 태그입니다.
- outer 박스에서의 e.currentTarget은 이벤트 리스너가 달린 div 태그이고, e.target은 이벤트가 실제로 발생한 sapn 태그입니다.
참고로 여기서 inner 박스를 클릭했는데 outer 박스의 이벤트 정보까지 출력되는 것은 이벤트 capturing, bubbling과 관련되어 있습니다. 궁금하신 분들은 해당 내용을 살펴보시길 바랍니다.
outer 박스도 클릭해 보겠습니다.
- outer 박스의 e.currentTarget = div, e.target = div
outer 박스를 클릭하면 이벤트 리스너가 달린 요소와 실제로 이벤트가 일어난 요소 모두 div로 같습니다.
다시 한번 더 정리를 해보면,
e.currentTarget : 이벤트 리스너가 달린 요소
e.target : 실제로 이벤트가 발생하는 요소
어떤 요소에서 이벤트가 발생하느냐에 따라 e.currentTarget과 e.target이 같을 수도 다를 수도 있습니다 :)
잘못된 내용이 있다면 댓글로 알려주세요!🤗
참고
