버블링 & 캡처링

이벤트 전파

버블링 & 캡처링

계층적 구조 → 연쇄적 이벤트 흐름 발생 ⇒ 이벤트 전파(Event Propagation)

이벤트 전파: 이벤트가 발생했을 때 브라우저가 이벤트 리스너를 실행시킬 대상 요소를 결정하는 과정

버블링(Bubbling) : 자식 요소에서 발생한 이벤트가 바깥 부모 요소로 전파 (기본값)
캡쳐링(Capturing) : 자식 요소에서 발생한 이벤트가 부모 요소부터 시작하여 안쪽 자식 요소까지 도달

버블링

→ 한 요소에 이벤트가 발생되면, 그 요소의 부모 요소의 이벤트도 같이 발생되는 이벤트 전파

<body>
	<div class="parent">
		<div class="child">
			<a href="http://google.com">
				click!
			</a>
		</div>
	</div>
<body>

const parent = document.querySelector('.parent');
const child = document.querySelector('.child');
const a = document.querySelector('a');

window.addEventListener('click', event => {
	console.log('window clicked');
});

document.addEventListener('click', event => {
	console.log('body clicked');
});

parent.addEventListener('click', event => {
	console.log('parent clicked');
});

child.addEventListener('click', event => {
	console.log('child clicked');
});

a.addEventListener('click', event => {
	console.log('a clicked');
});

a 요소 클릭했을 때

버블링 예시 - a 요소 클릭 결과 console

stopPropagation

전파를 멈추는 메서드

parent.addEventListener('click', event => {
	console.log('parent clicked');
  event.stopPropagation(); // 버블링 정지
});

a 요소 클릭했을 때

stopPropagation 예시 - a 요소 클릭 결과 console

캡처링

→ 한 요소에 이벤트가 발생되면, 그 요소의 자손 요소의 이벤트도 같이 발생되는 이벤트 전파

parent.addEventListener('click', event => {
	console.log('parent clicked');
}, { capture: true} );

a 요소 클릭했을 때
→ capture를 true로 설정한 parent 요소의 이벤트가 먼저 동작

캡처링 예시 - a 요소 클릭 결과 console

window.addEventListener('click', event => {
	console.log('window clicked');
}, true);

document.addEventListener('click', event => {
	console.log('body clicked');
}, true);

parent.addEventListener('click', event => {
	console.log('parent clicked');
}, true );

child.addEventListener('click', event => {
	console.log('child clicked');
}, true);

a.addEventListener('click', event => {
	console.log('a clicked');
}, true);

a 요소 클릭했을 때
→ 바깥쪽에서 안쪽으로 이벤트 전파

캡처링 예시2 - a 요소 클릭 결과 console

references
👉 https://c4u-rdav.tistory.com/85