event.target 과 event.currentTarget 의 차이

event.target 과 event.currentTarget

event.target 과 event.currentTarget 은 비슷한 이름을 가졌지만, 다른 결과를 낸다.

event.target

<div onclick="alert(event.target);">
  <span>HELLO</span>
</div>

• div 의 onclick 은 event.target 을 띄운다.
• 자식 엘리먼트인 span 을 클릭하면, alert 에 표출되는 내용은 [object HTMLSpanElement] 이다.
  • 즉 span 을 클릭하면, div 에 이벤트를 걸어도 event.target 은 span 이다.
• div 만 정확하게 클릭하면 출력 내용은 [object HTMLDivElement] 이다.
• event.target 은 내가 실제로 클릭한 요소를 나타낸다.

event.currentTarget

<div onclick="alert(event.currentTarget);">
  <span>HELLO</span>
</div>

• event.currentTarget 은 자식 요소를 클릭하는 것과는 상관없이 이벤트가 걸린 요소 (this) 를 나타낸다.
• event.target 과 달리 아무리 이번엔 아무리 span 을 클릭해도 출력 결과는 [object HTMLDivElement] 이다.