[Javascript] 브라우저 이벤트 : 버블링(Bubbling)과 캡처링(Capturing)

Dom 이벤트의 흐름

1. 캡처링

이벤트가 하위 요소로 전파되는 단계

2. 타깃 단계

이벤트가 실제 타깃 요소에 전달되는 단계

3. 버블링

이벤트가 상위 요소로 전파되는 단계

출처: JavaScript Event Flow: Bubbling, Capturing, and Delegation Decoded!

<element>를 클릭하면 이벤트가 최상위 조상에서 시작해 아래로 전파되고(캡처링 단계), 이벤트가 타깃 요소에 도착해 실행된 후(타깃 단계), 다시 위로 전파된다.(버블링 단계).

Dom 이벤트 흐름의 특징

캡처링 단계를 사용하는 경우는 거의 없다. 이벤트 타겟 순서는 기본적으로 버블링이다. 이전에는 이벤트 타겟 순서가 브라우저별로 달랐지만,  W3C에서 표준 이벤트 실행 순서를 지정했다.

타깃이 되는 가장 하위 요소부터 이벤트를 상위로 전파(Bubbling)하는 이유는, 특정 요소에 할당된 핸들러가 그 요소에 대해 무슨 일을 해야할 지 가장 잘 알고 있기 때문이다. 

---

타깃(target) 요소

• event.target - 실제로 클릭한 요소
• this - '현재 요소', 즉 현재 실행 중인 핸들러가 할당된 요소 
  
  

ex) onClick핸들러가 할당된 Form요소가 있고, 안에 button이 있을 때, button을 클릭했을 경우 event.target은 button이고 이벤트의 this는 Form이다.

---

버블링 동작 과정 

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

가장 안쪽의 <p>를 클릭하면 순서대로 동작한다.

1. <p>에 할당된 onclick 핸들러가 동작
2. 바깥의 <div>에 할당된 핸들러가 동작
3. 그 바깥의 <form>에 할당된 핸들러가 동작
4. document 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러가 동작

버블링 중단하기

event.stopPropagation()

핸들러가 이벤트를 처리하고 난 뒤 버블링을 중단하게 된다. 그러나 이벤트를 처리하는 핸들러가 여러개일 때, 핸들러 중 하나가 버블링을 멈추더라도 나머지 핸들러는 여전히 동작한다.

event.stopImmediatePropagatio()

버블링을 멈추고 요소에 할당된 다른 핸들러의 동작도 막는다. 

버블링 중단의 위험성

stopPropagation()이 실행된 영역은 죽은 영역(dead zone)이 되어, 상위 컴포넌트에서 이벤트를 감지하려고 할 때 분석이 되지 않는다. 따라서 반드시 필요한 경우를 제외하고는 버블링을 막지 않는다.

---

 

 

참고 출처

버블링과 캡처링

Mastering JavaScript Event Flow: Bubbling, Capturing, and Delegation Decoded!