[JS] event.target, event.currentTarget의 차이(feat. 이벤트 버블링)

이번 시간에는 이벤트가 발생한 요소를 알 수 있는 event.target, event.currentTarget에 대해 알아보았다!

1. 이벤트 발생 요소에 접근하는 법

• 우리는 js에서 dom.addEventListener(이벤트, 핸들러)로 요소에 이벤트를 걸거나 html에서 onEvent(ex. onClick)를 사용해 이벤트를 적용할 수도 있다.
• 만약 버튼에 클릭이 발생할 때마다 특정 로직을 실행하고 싶다면 두가지 방법을 쓸 수 있다.

<button class="btn" type="button">나는 버튼이야</button>

const btn = document.querySelector('.btn');

btn.addEventListener('click', (event) => {
   // click발생시 실행할 로직
  }
)

<button class="btn" type="button" onClick="onClick(event)">나는 버튼이야</button>

function onClick(event) { 
  // click발생시 실행할 로직     
}

🤔 그런데 이벤트가 발생한 요소에 접근할 수 있는 방법은 없을까? 2가지 방법이 있다!

1) event.target

(1) event.target 이란?

• event.target은 이벤트가 실제로 발생한 요소를 가리킨다.
• 단, IE에서는 event.target은 event.srcElement로 사용해야한다.
• 만약, parent 내부에 child 요소가 있고, child 요소에서 클릭 이벤트가 발생하면 event.target은 child이다.

See the Pen event.target by KumJungMin (@kumjungmin) on CodePen.

See the Pen event.target-2 by KumJungMin (@kumjungmin) on CodePen.

2) event.currentTarget

(1) event.currentTarget 이란?

• event.currentTarget는 이벤트가 적용된 부모 요소 혹은 자신을 가리킨다.
• 단, IE에서는 currentTarget은 지원하지 않는다.
• 만약 아래 예시처럼 child-2에만 이벤트가 적용되어 있다면 currentTarget는 child-2이다.

See the Pen event.currentTarget-1 by KumJungMin (@kumjungmin) on CodePen.

• 하지만 child-2의 부모인 child-1, parent에 이벤트가 적용되어 있다면 currentTarget는 상위요소인 parent를 가리킨다.

See the Pen event.currentTarget-2 by KumJungMin (@kumjungmin) on CodePen.

🤔 왜 event.currentTarget에서는 이 현상이 발생하는 걸까? 그 이유는 이벤트 버블링 때문인데, 이 개념에 대해서 간단히만 살펴보자

(2) 이벤트 버블링이란?

• 이벤트 버블링(event bubbling)이란, 요소에 이벤트가 발생했을 때 해당 요소에 할당된 핸들러는 물론 부모의 핸들러까지 동작하는 현상을 말한다.

❓ 그럼, 이벤트 버블링은 모든 이벤트에서 발생하나요? 아니다!

• focus, blur, mouseenter, mouseleave에서는 이벤트 버블링이 발생하지 않는다.
• 만약 이 이벤트에도 버블링을 발생시키려면 아래와 같이 다른 이벤트로 대체해서 쓸 수 있다.

버블링 미발생 이벤트	버블링 발생가능한 대체 이벤트
focus	focusin
blur	focusout
mouseenter	mouseover
mouseleave	mouseout

💡 정리하자면, event.target은 이벤트가 실제로 발생한 요소를 가리키며, event.currentTarget은 이벤트 버블링으로 인해 이벤트가 발생한 대상 요소나 부모 요소를 가리키는 걸 알 수 있다.