event.target과 event.currentTarget 차이

Event 객체 속성 비교

event.target과 event.currentTarget 차이를 간단하게 정리합니다.

event.target과 event.currentTarget 은 같을 수도 있고, 다를 수도 있습니다.

    <button type="button" class="btn-search" data-category="title">Search</button>
    <script>
    const btnSearch = document.querySelector('.btn-search');
    btnSearch.addEventListener('click', function (event) {
        // event.target == event.currentTarget
        console.log(event.target);          // button
        console.log(event.currentTarget);   // button

        console.log(event.target.dataset.category);     // title
    });
    </script>

이벤트를 일으키는 대상과 핸들러를 연결한 대상이 같으므로 event.target을 사용하면 됩니다.

 

event.currentTarget 은 이벤트 핸들러를 사용하는 객체를 가리킵니다.

    <button type="button" class="btn-search btn-image" data-category="write">
        <img src="https://cdn.pixabay.com/photo/2017/01/10/23/01/seo-1970475_960_720.png"
            alt="search" height="24px" /></button>
    <script>
    const btnImg = document.querySelector('.btn-image');
    btnImg.addEventListener('click', function (event) {
        // event.target != event.currentTarget
        console.log(event.target);          // image
        console.log(event.currentTarget);   // button
        
        console.log(event.target.dataset.category);         // undefined
        console.log(event.currentTarget.dataset.category);  // write
    });
    </script>

이벤트 버블링에 의해 핸들러가 작동하기는 하지만 event.target 이 엉뚱한(?) 대상을 가리키므로 당황합니다.

currentTarget 속성이 있는지 모른다면 다양한 방법으로 우회하려고 할 수 있습니다. 저도 target인 이미지부터 위로 찾아가는 방식으로 접근해 볼까 생각했었습니다.
(버튼이 아닌 이미지를 클릭하도록 버튼 속성을 조정한 상태라고 가정하고 일부러 이미지를 피해서 버튼을 클릭하지 않아요)

 

이벤트를 일으키는 대상이 아닌 핸들러를 연결한 대상에서 필요한 정보를 얻으려고 하므로 event.currentTarget을 사용하면 됩니다.

 

가리키는 객체가 다릅니다.

event.target 은 이벤트가 발생한 객체를 가리킵니다.
event.currentTarget 은 이벤트 핸들러를 사용하는 객체를 가리킵니다.

 

이벤트 버블링과 캡처링을 참고하면 됩니다.

 

    <script>
    const btnSearchs = document.querySelectorAll('.btn-search');
    btnSearchs.forEach(function (element) {
        element.addEventListener('click', function (event) {
            console.log(event.currentTarget.dataset.category);
        });
    });
    </script>