this, event.currentTarget, event.target 차이점

click event 발생 시 this, event.currentTarget, event.target 가 가리키는 대상에는 어떤 차이가 있을까?

아래 예제로 알아보자.

아래 꽃 사진을 보여주는 div, img 요소가 있다.
아래 element에 click event를 걸어 this, event.currentTarget, event.target의 return 값을 확인해보면 약간 차이가 있다.

(중략)...
      <div class="garden">
        <img src="images/flower.png" alt="꽃" />
      </div>
(중략)...
        
    <script>
      (function () {
        const garden = document.querySelector(".garden");

        function clickHandler(event) {
          console.log(this); 
          console.log(event.currentTarget); 
          console.log(event.target);
        }

        garden.addEventListener("click", clickHandler);
      })();
   </script>

console.log 결과

this

      <div class="garden">
        <img src="images/flower.png" alt="꽃" />
      </div>

• 화살표 함수를 사용하는 경우 함수가 호출되는 this 컨텍스트를 참조 하고, 함수 표현식을 사용하는 경우 호출되는 컨텍스트를 참조한다.
• 함수 표현식을 사용하는 경우 this대신 event.currentTarget를 사용할 수 있다.

event.currentTarget

      <div class="garden">
        <img src="images/flower.png" alt="꽃" />
      </div>

• 이벤트가 바인딩된 DOM 요소를 가리킨다.

event.target

        <img src="images/flower.png" alt="꽃" />

• 실제 이벤트가 시작된 target 요소를 가르킨다.

this, event.currentTarget, event.target의 차이점을 숙지해서 필요할 때 잘 구분해서 사용할 수 있도록하자.

Reference

https://stackoverflow.com/questions/5125926/javascript-event-currenttarget-vs-this
https://discuss.codecademy.com/t/whats-the-difference-between-this-event-currenttarget-and-event-target/395223
https://ko.javascript.info/bubbling-and-capturing