[JavaScript] - Event Bubbling & Capturing

웹 개발에 대해 기초부터 다시 차근차근히 쌓아간다는 생각으로 (면접 준비할겸)

알아야하는 것들을 찾아보고 기록하려고 한다.

 

1. Event Bubbling

- 한 요소에 이벤트(ex. 클릭, 입력 등)가 발생할 때, 해당 요소부터 부모 요소까지 이벤트가 전파되는 현상

 

말로는 이해하기 어려울 수 있지만 한번 예시를 보면서 이야기해보자

See the Pen Untitled by 오지훈 (@qgmsycay-the-decoder) on CodePen.

여기에서 depth3 을 누르면 depth3 -> depth2 -> depth1 에 할당된 함수(handler)가 작동되는 것을 볼 수 있는데 이를 거품이 올라오는 것과 비슷하여 Bubbling이라고 이름을 붙였다고 한다. 

이를 왜 알아야되나 싶었는데, 실제 예시를 생각해볼 때 이럴 수 있다.

 

nav바를 만들때 각각에 해당 url을 걸어둘텐데, 이때 부모 요소를 통해 함수를 걸어둔다면 하드 코딩 없이 간단하게 구현 가능하다.

See the Pen nav bubbing by 오지훈 (@qgmsycay-the-decoder) on CodePen.

보통 개발하는 방식은 아니긴 하겠지만, 자식 요소에서 발생한 이벤트가 부모 요소에도 이벤트를 발생 시킨다는 개념을 알고 있는다면 도움이 될 것이다. 

 

2. Event Capturing

- event bubbing과는 반대로 이벤트가 해당 요소로 전달되는 과정이라고 생각하면 된다.

중요한 개념은 아니지만 그래도 알아야 DOM의 구조를 알 수 있기 때문에 정리한다.

 

이것과 같이 알아야하는 표준 DOM Event의 이벤트 흐름 3가지가 있다.

1. Capturing 단계 – 이벤트가 하위 요소로 전파되는 단계
2. Target 단계 – 이벤트가 실제 타깃 요소에 전달되는 단계
3. Bubbling 단계 – 이벤트가 상위 요소로 전파되는 단계

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

 

Capturing 의 과정을 보기 위해서는 addEventlistener에서 true나 {capture: true} 를 넣어준다면 볼 수 있다

바로 예제를 확인해보자

See the Pen event bubbling & capturing by 오지훈 (@qgmsycay-the-decoder) on CodePen.

 

이렇게 event는 html 부터 시작해서 이벤트가 발생한 해당 요소 그리고 다시 html 까지 올라오는 과정을 거치게 된다.

 

참고로 그래서 stopPropagation() 이라는 함수를 통해서 부모 요소에게 이벤트를 전파하는 것을 막을 수 있는데,

검색을 해보니 그렇게 권장하는 방법은 아니라고 하니 알아둬야 겠다. (저거랑 preventdefault() 의 차이 물어본다던데)

 

요약

event bubbling은 한 요소에서 발생한 이벤트가 그의 부모까지 이벤트가 발생하는 것을 말한다.

event capturing은 그에 반대이고 이벤트가 html 부터 해당 요소까지 전달되는 과정을 말한다.

 

참고 자료

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

https://jhyonhyon.tistory.com/24