[javascript] currentTarget과 target의 차이점

currentTarget

https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

이벤트 핸들러가 연결된 요소를 가리킨다.

target

https://developer.mozilla.org/en-US/docs/Web/API/Event/target

실제 이벤트가 발생하는 위치, 내가 클릭한 요소를 반환한다.

예제

<ul id="parent">
    <li id="1">Item 1</li>
    <li id="2">Item 2</li>
    <li id="3">Item 3</li>
</ul>

<script>
    const parent = document.querySelector('#parent');
    parent.addEventListener("click", function (e) {
        console.log(e.currentTarget);
        console.log(e.target);
    });
</script>

결과

-> currentTarget은 이벤트리스너가 연결된 부모요소를 출력하고, target은 클릭한 자식요소를 출력한다.