[Javascript] 이벤트 전파(bubbling, capturing)

# 이벤트 전파(Event propagation)

특정 이벤트가 먼저 발생해 어떤 순서로 발생할지 정하는 것을 이벤트 전달이라고 한다.

표준 DOM 이벤트에서 정의한 이벤트 흐름엔 3가지 단계가 있다.

캡처링 단계 : 이벤트가 하위 요소로 전파되는 단계
타깃 단계 : 이벤트가 실제 타깃 요소에 전달되는 단계
버블링 단계 : 이벤트가 상위 요소로 전파되는 단계

공식적으론 총 3개의 이벤트 흐름이 있지만, 이벤트가 실제 타깃 요소에 전달되는 단계인 ‘타깃 단계’(두 번째 단계)는 별도로 처리되지 않는다. 캡처링과 버블링 단계의 핸들러는 타깃 단계에서 트리거된다. 즉, 버블링과 캡처링은 둘 중에 하나만 발생하는 것이 아니라 캡처링부터 시작하여 버블링으로 종료한다.

# 이벤트 버블링(Bubbling)

이벤트 버블링(Event Bubbling)은 이벤트가 발생한 요소(하위 요소)부터 부모들(상위 요소)에게 순차적으로 이벤트가 전파되는 방식이다.

<body>
	<div class="one">
		<div class="two">
			<div class="three"></div>
		</div>
	</div>
</body>

var divs = document.querySelectorAll('div');

divs.forEach(function(div) {
	div.addEventListener('click', logEvent);
});

function logEvent(event) {
	console.log(event.currentTarget.className);
}

// three
// two
// one

위와 같은 경우 클래스 명 three를 클릭하게 되면 three -> two -> one 순서로 div 태그에 등록된 이벤트들이 실행된다. 이렇게 하위 요소에서 상위 요소로 이벤트가 전파되는 방식을 **이벤트 버블링(Event Bubbling)**이라고 한다.

# 이벤트 캡처링(Capturing)

이벤트 캡처링(Event Capturing)은 이벤트가 발생한 요소(상위 요소)부터 자식들(하위 요소)에게 순차적으로 이벤트가 전파되는 방식이다.

<body>
	<div class="one">
		<div class="two">
			<div class="three"></div>
		</div>
	</div>
</body>

var divs = document.querySelectorAll('div');

divs.forEach(function(div) {
	div.addEventListener('click', logEvent, {
		capture: true // default 값은 false
	});
});

function logEvent(event) {
	console.log(event.currentTarget.className);
}

// one
// two
// three

addEventListener() API에서 capture 옵션(addEventListener의 3번째 인자)의 값을 true로 설정해주면 된다. 그러면 해당 이벤트를 감지하기 위해 이벤트 버블링과 반대 방향으로 탐색한다.