이벤트 버블링 & 캡처링

바닐라 JS 로 프로그래밍을 하다보면 생기는 현상이 있다.
이벤트를 다른 곳에 지정했는데 왜 상위요소가 지정되지?
왜 하위요소도 전부..?

---

event flow

 

DOM 이벤트 흐름에는 캡처링, 타겟, 버블링 3가지가 있다.

 

캡처링은 이벤트가 하위요소로 전파되는 것이고

타겟은 이벤트가 실제 타겟 요소에 전달되는 것

그리고 버블링은 이벤트가 상위 요소로 전파되는 것이다.

 

테이블 안 td 태그를 클릭했을때 이벤트의 흐름

td 태그를 클릭하게 되면 이벤트가 최상위에서 시작해 아래로 전파. -> 캡처링

이벤트가 타겟 요소에 도착해 실행 된다. -> 타겟

그리고 다시 위로 전파된다. -> 버블링

 

위 그림의 3개의 phase 중에서 이벤트 핸들러가 실행되는 과정은 원래 target phase, bubbling phase 이나, 필요에 따라서 capture phase 와 target phase 에서 발생하도록 할 수 있다.

---

캡처링

 

캡처링은 이벤트가 하위 요소로 전파된다.

이벤트 버블링의 역순이며 타겟으로부터 거품이 올라오는게 버블링이라면, 해당 타겟이 어디있는지 찾아 내려가는 과정이 캡쳐링이다.

 

이벤트 캡처링은 이벤트 리스너에 세번째 매개변수로 true 를 지정해 사용할 수 있다.

element.addEventListener('click', (e) => {
	// 이벤트 처리
}, true)

 

true 매개변수는 이벤트가 하위 요소로 캡처되는 단계에서 이벤트 핸들러를 실행하도록 한다.

이렇게 하면 이벤트가 버블링 단계에 도달하기 전에 이벤트를 처리할 수 있다.

 

아직 경험이 많지 않지만 캡처링 과정이 중요할때가 있었나 싶다.

언제 사용되지..

---

버블링

 

버블링 단계는 이벤트가 상위 요소로 전달되는 것을 말한다.

즉 캡처링과 정반대로 동작한다.

 

특정 화면 요소에서 이벤트가 발생했을 때 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전파시킨다.

 

---

모두 다 버블링 될까?

 

모든 이벤트가 다 버블링이 되는 것은 아니다.

예를 들어 input 에 들어가는 onfocus 같은 이벤트는 버블링되지 않는다.

이런 특수한 이벤트를 제외하면 거의 다 버블링 된다고 생각하면 된다.

 

---

이벤트 버블링이 왜 존재해?

 

각 하위 요소에서 이벤트 핸들러를 각각 세팅해주기 보다는, 부모 요소에서 이벤트를 인지해서 상위 한 곳에서 핸들링을 하기 용이하게 만들기 위한 의도이다.

 

말 그대로 이벤트에 대한 핸들링을 다른 요소에 위임하는 방식이다.

이벤트 버블링이 없다면 모든 버튼에 핸들러를 넣어주어야 할 것이다.

이게 없다면 UI 요소에 로직 관련된 것이 너무 많이 들어가 보기 좋지 않고,

매번 새로운 핸들러를 만들어서 넣어주어야 해서 특정 경우에는 번거롭다.

---

이벤트 버블링 제어

 

event.stopPropagation() 으로 버블링을 제어할 수 있다.

이를 사용하면 이벤트가 상위 요소로 전파되는 것을 막는다.

 

element.addEventListener('click', (e) => {
	e.stopPropagation();
})

 

위와 같은 방식으로 의도치 않은 버블링 발생을 피할 수 있다.

 

하지만 이를 사용할 땐 항상 주의해야한다.

때떄로 이벤트의 전파를 막는 것이 예상치 못한 문제를 일으킬 수 있기 때문이다.

그리고 e.stopPropagation() 은 이벤트 버블링 뿐 아니라 이벤트 캡처링도 중단시킨다.

따라서 이 메서드를 호출하면 이벤트의 전파 단계에 따라 실행되어야 할 다른 이벤트 핸들러들이 제대로 작동하지 않을 수 있다.

 

---

참고링크

 

https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/

이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지

https://medium.com/hcleedev/web-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81%EA%B3%BC-%EC%BA%A1%EC%B2%98%EB%A7%81-%EC%9C%84%EC%9E%84-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0-f85d9c728561

Web: 이벤트 버블링과 캡처링, 위임 알아보기

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EB%B2%84%EB%B8%94%EB%A7%81-%EC%BA%A1%EC%B3%90%EB%A7%81

🌐 한눈에 이해하는 이벤트 흐름 제어 (버블링 & 캡처링)

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

버블링과 캡처링