-
Event Bubbling개발/JavaScript (자바스크립트) 2021. 8. 3. 16:28
특정 개체의 Event를 지정해 실행했을 경우에도, 상위 개체의 Event 또한 같이 실행되는 모습을 보았을 것이다.
이는 DOM 이벤트 처리 흐름과 관련이 있다.
Event Bubbling (이벤트 버블링)
아래 예를 보자 HTML 코드와 JS코드가 아래와 같을 때, 브라우저 상에서 '철수'를 누르면 어떻게 될까?
<!--HTML 코드--> <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> </head> <body> <div> <ul id="list"> <li id="child">철수</li> <li id="child">영희</li> <li id="child">지수</li> </ul> </div> <script src="index.js"></script> </body> </html>// JS 코드 const list = document.querySelector('#list'); const child = list.children; function event1() { console.log("list"); } function event2() { console.log("child"); } list.addEventListener('click', event1); for(let n = 0; n < child.length; n++){ child[n].addEventListener('click', event2); }철수만 클릭하였는데도, 그 위 상위 개체에 할당된 list이벤트가 작동된다.
child listJS의 DOM 이벤트 처리는 다음과 같은 순서로 진행된다. 아래 그림을 참고하자.
DOM Event의 흐름을 나타낸 그림 / 출처 W3 (https://www.w3.org/TR/DOM-Level-3-Events/) 위 그림을 참고해서 아까 예제를 다시 살펴보자. '철수'를 눌렀을 때 무슨 일이 일어났던 걸까?
1. Capture Phase (캡처 단계) (이 글에서 캡처 단계는 다루지 않는다.)
이 단계에서는 DOM의 최상단인 Window부터 "철수"문자가 있는 li 태그까지 내려오게 된다.
2. Target Phase (타깃 단계)
"철수"까지 내려왔다면, 이제는 "철수"에 지정되어 있던 Event Handler를 동작시킨다.
이 과정에서 콘솔에 child가 출력된다.
3. Bubbling Phase (버블링 단계)
1번 단계와는 반대로, "철수"에서부터 거슬러 올라간다.
버블링 과정을 거치면서 on <event>와 addEventListener로 할당된 Event Handler를 호출시키며 Window까지 올라간다.
이 과정에서 콘솔에 list가 출력된다.
그럴 일은 거의 없지만 만약 버블링을 중단하고 싶다면, Event Handler에 event.stopPropagation()를 추가해주면 된다.
'개발 > JavaScript (자바스크립트)' 카테고리의 다른 글
Argument(인자)와 Parameter(매개변수) (0) 2022.05.04 EventListener와 EventHandler (0) 2021.08.02 코드잇 코드잇 코드잇! (0) 2021.07.30