이벤트 버블링(Event Bubbling) 이란?

특정 화면 요소에 이벤트가 발생했을 때, 해당 이벤트가 상위의 화면 요소로 전달되어가는 특성을 의미한다.

조금 더 이해하기 쉽게 설명하자면, 특정 화면 요소에 이벤트가 발생했을 때, 해당 요소에 할당된 이벤트 핸들러가 작동하고, 이어서 부모 요소에 할당된 핸들러가 동작하며, 가장 최상단의 화면 요소인 document(body) 를 만날 때 까지 이 과정이 반복된다.

예제 코드

const divClickHandler = () => {
	console.log('clicked div');
};

const aClickHandler = () => {
	console.log('clicked a');
}

const buttonClickHandler = () => {
	console.log('clicked button');
}

// Vanilla Javascript에서 이벤트 리스너/핸들러를 등록하는 방법
const divEl = document.querySelector('div');
divEl.addEventListener('click', divClickHandler);

const aEl = document.querySelector('a');
aEl.addEventListener('click', aClickHandler);

const buttonEl = document.querySelector('button');
buttonEl.addEventListener('click', buttonClickHandler);

// React에서 이벤트 리스너/핸들러를 등록하는 방법
<div onClick={divClickHandler}>
	<a onClick={aClickHandler}>
		<button onClick={buttonClickHandler}>Button</button>
	</a>
</div>

// button 클릭 시 결과
// clicked button
// clicked a
// clicked div

이벤트 캡쳐링(Event Capturing) 이란?

이벤트 캡쳐링은 이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식이다.

이벤트 버블링이 특정 화면 요소의 이벤트가 발생했을 때, 가장 최상위의 화면 요소까지 순차적으로 이벤트 핸들러를 작동시킨다고 하면, 이벤트 캡쳐링은 반대로 가장 최상위의 화면 요소 핸들러를 먼저 작동시키고, 특정 화면 요소 핸들러를 마지막에 작동 시킨다.

예제 코드

Vanilla Javascript에서 이벤트 캡쳐링은 이벤트 리스너를 등록할 때, addEventListener() API에서 옵션으로 설정할 수 있다.

React에서 이벤트 캡쳐링은 이벤트 리스너를 등록할 때 이벤트명 뒤에 Capture를 붙여 설정할 수 있다.

<aside> 💡 addEventListener()를 통해 이벤트 리스너, 핸들러를 등록했다면, 반드시 removeEventListener()를 통해 리스너, 핸들러를 지워주어야 한다.

ex) removeEventListener(’click’, buttonClickHandler, { capture: true });

</aside>

const divClickHandler = () => {
	console.log('clicked div');
};

const aClickHandler = () => {
	console.log('clicked a');
}

const buttonClickHandler = () => {
	console.log('clicked button');
}

// Vanilla Javascript에서 이벤트 캡쳐링을 사용하는 방법
const divEl = document.querySelector('div');
divEl.addEventListener('click', divClickHandler, { capture: true });

const aEl = document.querySelector('a');
aEl.addEventListener('click', aClickHandler, { capture: true }); 

const buttonEl = document.querySelector('button');
buttonEl.addEventListener('click', buttonClickHandler, true); // boolean으로 넘겨도 된다.

// React에서 이벤트 캡쳐링을 사용하는 방법
<div onClickCapture={divClickHandler}>
	<a onClickCapture={aClickHandler}>
		<button onClickCapture={buttonClickHandler}>Button</button>
	</a>
</div>

// button 클릭 시 결과
// clicked div
// clicked a
// clicked button

이벤트 흐름도