FRONTEND/JavaScript

[Javascript] 이벤트 버블링, 캡처링

녜힝 2022. 1. 31. 21:47
반응형
<body>
    <div class="root">
    	<div class="parent">
            <div class="child">
                <div class="target">Target</div>
            </div>
        </div>
    </div>
</body>

Target을 클릭하면 target -> child -> parent -> root -> body 순으로 이벤트가 전파된다. (하위 -> 상위)

 

이와 같이 중첩된 요소에 이벤트가 발생할 때, HTML DOM API의 이벤트 전파는 두 가지 방식이 있다.

그 두 가지가 바로 이벤트 버블링과 캡처링이다.

 

이벤트 버블링 (Event Bubbling) 😵

 

이벤트 버블링은 이벤트가 발생한 요소부터 window까지 이벤트를 전파한다.  (하위 -> 상위)

 

 

 

이벤트 캡처링 (Event Capturing) 📸

 

이벤트 캡처링은 window로부터 이벤트가 발생한 요소까지 이벤트를 전파한다. (상위 -> 하위)

 

이벤트 리스너를 등록할 때 capture : true 를 설정해주면 됩니다.

 

버블링과 캡처링은 이벤트를 등록할 때 정의할 수 있다.

이벤트 리스너인 addEventListener 메소드를 살펴보자.

 

target.addEventListener(type, listener[, useCapture]);

 

세번째 인자인 useCapture는 캡처링 여부를 의미합니다. 

default 값이 false 이기 때문에, 단순히 사용했다면 버블링을 통해 이벤트를 전파했을 것입니다.

true 로 설정해주면 캡처링을 통해 이벤트를 전파합니다. 

 

이벤트 전파를 원하지 않는다면 event.stopPropagation() 🧨

 

event.stopPropagation()은 이벤트가 전파되는 것을 막는다.

 

target.addEventListener("click", function(e){
	e.stopPropagation();
})

 

이벤트 버블링의 경우, 클릭한 요소의 이벤트만 발생시키고 상위 요소로 이벤트를 전달하는 것을 방해합니다.

이벤트 캡처링의 경우, 클릭한 요소의 최상위 요소의 이벤트만 동작시키고 하위요소들로 이벤트를 전달하지 않습니다.

 

(이벤트 버블링 : 클릭한 요소의 이벤트만 발생 / 이벤트 캡처링 : 최상위 요소만 동작)

반응형