이벤트 버블링

이글은 Javascript.info의 글인 버블링과 캡처링의 내용을 일부 인용하고 있습니다

이번 글에서는 이벤트 버블링에 대해 알아보고자 한다. 버블링이란 자식요소에서 실행된 이벤트(핸들러)가 부모 요소에서도 실행되고 이런 현상이 가장 최상단의 요소를 만날때까지 반복되는 현상을 말하며 이러한 모습이 마치 거품이 생기는 모습과 비슷하다고 해서 이벤트 버블링이란 이름이 붙혀지게 되었다. 먼저 코드를 보면서 설명하도록 하겠다.

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

위의 코드에서 p태그에 할당된 핸들러를 실행하게 상위에 있는 div, form의 onclick 이벤트까지 같이 실행된다. p태그를 클릭했을때 발생하는 일을 순서대로 설명해보겠다.

 

1. <p>에 할당된 onclick 핸들러가 실행된다

2. 바깥의 <div>에 할당된 핸들러가 실행된다

3. 그 바깥의 <form>에 할당된 핸들러가 실행된다

4. document객체를 만날 때까지 각 요소에 할당된 onclick 핸들러가 실행된다

이처럼 내부에 있는 핸들러를 실행시켰음에도 불구하고 이벤트 버블링위 발생해 상위 요소에 할당된 핸들러가 실행되고 있는 모습을 볼 수 있다.

event.target

부모 요소의 핸들러는 이벤트가 어디서 발생했는지에 대한 자세한 정보를 알 수 있다. 이벤트가 발생한 가장 안쪽의 요소는 타깃(target)요소라고 불리고 event.target을 사용해 접근할 수 있다.

버블링 중단하기

이벤트 버블링은 타깃 이벤트에서 시작되어 document객체를 만날때까지 각 노드에서 모두 발생하며 그중 몇몇은 window객체까지 거슬러 올라가기도 한다. 그런데 핸들러에게 이벤트를 처리한 후 버블링을 중단하도록 명령할수도 있다. 이때는 이벤트 객체의 메서드인 event.stopPropagation을 사용하면 된다.

그러나 버블링을 막아야 할 이유는 거의없다. 대부분의 경우 버블링은 필요하며 위의 메서드를 이용해서 강제로 버블링을 중단시켰을 경우 추후에 문제가 될만한 상황이 발생할 수 있다. 예를 들자면 사람들이 페이지에서 어떤 곳을 클릭했는지 감지하는 분석 시스템을 도입한다고 해보자. 이런 분석 시스템은 클릭 이벤트를 감지하기 위해 document.addEventListenr('click')을 사용한다. 그런데 stopPropagation으로 버블링을 막은 영역에서는 해당 시스템이 작동하지 않게 되고 감지되지 않는 데드존이 되고만다.