JavaScript에서의 이벤트 버블링

서로 중첩된 여러 개의 블록이 있다고 상상해 보세요:

<div id="elem1">
	<div id="elem2">
		<div id="elem3"></div>
	</div>
</div>

우리의 div에 대한 참조를 변수에 할당하겠습니다:

let elem1 = document.querySelector('#elem1');
let elem2 = document.querySelector('#elem2');
let elem3 = document.querySelector('#elem3');

이제 그들에 클릭 핸들러를 추가하겠습니다:

elem1.addEventListener('click', function() {
	alert('초록색');
});
elem2.addEventListener('click', function() {
	alert('파란색');
});
elem3.addEventListener('click', function() {
	alert('빨간색');
});

일부 CSS를 추가하여 우리의 블록들을 화면에 표시하겠습니다:

이제 가장 안쪽의 빨간색 블록을 클릭해 보세요 - 그러면 이벤트가 먼저 빨간색 블록에서, 그 다음 파란색 블록에서, 그 다음 초록색 블록에서 발생하는 것을 보게 될 것입니다. 이는 안쪽 블록을 클릭하면 동시에 모든 바깥쪽 블록도 클릭하는 것이기 때문에 논리적입니다.

즉, 가장 안쪽 블록을 클릭하면 클릭 이벤트가 먼저 그 블록에서 발생한 다음, 그 부모, 부모의 부모에서 발생하는 식으로 최상위에 도달할 때까지 계속됩니다.

이러한 동작을 이벤트 버블링(bubbling)이라고 합니다 - 마치 공기 방울이 바닥에서 떠오르는 것과 비유됩니다. 방울처럼, 우리의 이벤트는 마치 위로 떠오르며, 더 높은 블록에서 매번 발생하는 것처럼 보입니다.

이벤트 버블링을 시연하는 코드를 직접 작성하십시오. 다양한 유형의 이벤트에 대한 버블링을 확인하십시오.

모든 이벤트가 버블링되는 것은 아닙니다. 실험적으로 버블링되지 않는 이벤트를 적어도 하나 찾아보십시오.