[자바스크립트] 버블링과 캡쳐링

 

캡처링 단계 – 이벤트가 하위 요소로 전파되는 단계

버블링 단계 – 이벤트가 상위 요소로 전파되는 단계

---

<style>

body * { margin: 10px; border: 1px solid blue; }

</style>

<form onclick="alert('form')">FORM

<div onclick="alert('div')">DIV

<p onclick="alert('p')">P</p>

</div>

</form>

가장 안쪽의 <p>를 클릭하면 순서대로 다음과 같은 일이 벌어집니다.

<p>에 할당된 onclick 핸들러가 동작합니다.

바깥의 <div>에 할당된 핸들러가 동작합니다.

그 바깥의 <form>에 할당된 핸들러가 동작합니다.

document 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러가 동작합니다.

​

​

즉 p->div->form 순서로 창이 열린다.

이러한 흐름을 '이벤트 버블링'이라고 한다.

(거의 모든 이벤트들은 버블링이 일어난다. focus()같은 이벤트를 제외하면.)

​

Introduction to events (출처: MDN)

​

---

* event.target과 this(=event.currentTarget) 차이점

​

event.target은 실제 이벤트가 시작된 ‘타깃’ 요소입니다.

버블링이 진행되어도 변하지 않습니다.

this는 ‘현재’ 요소로, 현재 실행 중인 핸들러가 할당된 요소를 참조합니다.

​

---

*버블링 중단하기 event.stopPropagation(), event.stopImmediatePropagation()

​

한 요소의 특정 이벤트를 처리하는 핸들러가 여러개인 상황에서,

핸들러 중 하나가 버블링을 멈추더라도 나머지 핸들러는 여전히 동작합니다.

​

event.stopPropagation()은 위쪽으로 일어나는 버블링은 막아주지만, 다른 핸들러들이 동작하는 건 막지 못합니다.

​

버블링을 멈추고, 요소에 할당된 다른 핸들러의 동작도 막으려면 event.stopImmediatePropagation()을 사용해야 합니다. 이 메서드를 사용하면 요소에 할당된 특정 이벤트를 처리하는 핸들러 모두가 동작하지 않습니다.

​

하지만 버블링을 중단하는 건 좋지 않다. 버블링을 막는 경우도 드물다.

버블링 대신 다른 방법을 사용하자. 밑에 예시처럼.

if (event.target !== event.currentTarget) { return; }

​

---

* 캡처링

실제 코드에서 자주 쓰이진 않지만, 종종 유용한 경우가 있으므로 알아봅시다.

​

캡처링 단계 – 이벤트가 하위 요소로 전파되는 단계

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

버블링 단계 – 이벤트가 상위 요소로 전파되는 단계

​

출처 : https://ko.javascript.info/bubbling-and-capturing

캡처링에 대한 설명은 링크를 참고하면 된다.

---

 

Introduction to events - Learn web development | MDN

 

버블링과 캡처링