[JS] 이벤트 버블링

1. 이벤트 버블링(Event Bubbling)

이벤트 버블링이란?
한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 최상단의 부모 요소를 만날 때까지 반복되면서 핸들러가 동작하는 현상을 말합니다.

이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 발생하는 모양이 마치 물속 거품(bubble)과 닮았기 때문입니다.

event.target

이벤트가 발생한 가장 안쪽의 요소는 타깃(target) 요소라고 불리고, event.target을 사용해 접근할 수 있습니다.

event.target과 this(=event.currentTarget)는 다음과 같은 차이점이 있습니다.

• event.target은 실제 이벤트가 시작된 '타깃' 요소입니다. 버블링이 진행되어도 변하지 않습니다.
• this(=event.currentTarget) 는 '현재' 요소로, 현재 실행 중인 핸들러가 할당된 요소를 참조합니다.

this(=event.currentTarget) 이벤트를 붙인 애
ex) tmp.addEventlistener 의 tmp가 event.currentTarget 이 됩니다.

예시

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

form.onclick 핸들러 내의 this와 event.target은 다음과 같습니다.

• this(event.currentTarget) – <form>요소에 있는 핸들러가 동작했기 때문에 <form> 요소를 가리킵니다.
• event.target – 폼 안쪽에 실제 클릭한 요소를 가리킵니다.

버블링 중단하기

핸들러에게 이벤트를 완전히 처리하고 난 후 버블링을 중단하도록 명령할 수도 있습니다.

이벤트 객체의 메서드인 event.stopPropagation()를 사용하면 됩니다.

이벤트 버블링을 막아야 하는 경우는 거의 없습니다. 버블링을 막아야 해결되는 문제라면 커스텀 이벤트 등을 사용해 문제를 해결할 수 있습니다.