event.target & event.currentTarget

---

혼동하기 쉬운 event.target과 event.currentTarget의 차이점에 대해 정리해보자.
빠르고 간단하게 정의부터 살펴보면 아래와 같다.

event.target : 이벤트를 발생시킨 DOM 요소
event.currentTarget : 이벤트 핸들러가 바인딩된 DOM 요소

MDN도 빠르게 읽어보자.

event.target : reference to the object onto which the event was dispatched
event.currentTarget : It always refers to the element to which the event handler has been attached

즉, event.target은 실제 이벤트가 발생한 요소고 propagation이 진행되도 변하지 않는다.
event.currenTarget은 이벤트 핸들러가 할당된 요소이다.

일반적으로 event.target와 event.currenTarget은 동일한 DOM 요소를 가리키지만 이벤트 위임을 통해 상위 DOM 요소에 이벤트를 바인딩한 경우 다른 DOM 요소를 가리킬 수 있다.

예를 들어, 상위 div요소에 이벤트를 바인딩하고 하위 span요소에서 해당 이벤트를 발생시킬경우 event.currenTarget은 div를 가리키고 event.target은 span를 가리킨다.