이벤트 전파에 관하여

이벤트 전파(event propagation)

어떤 Element에서 발생한 이벤트는 부모 혹은 자식에게 전파되게 되는데, 이때 전파되는 방향에 따라 버블링(bubbling), 캡쳐링(capturing)이라고 부른다.

그리고 이러한 과정에서 이벤트 리스너가 차례로 실행되는것을 이벤트 전파(event propagation)라고 한다.

캡처링 단계

브라우저가 이벤트 대상을 찾아갈 때는 가장 상위의 window 객체부터 document, body 순으로 DOM 트리를 따라 내려간다. 이를 캡처링 단계라고 한다.

버블링 단계

이벤트 대상을 찾고 캡처링이 끝나면 다시 DOM 트리를 따라 올라가며 만나는 모든 버블링 이벤트 리스너를 실행시킨다. 이를 버블링 단계라고 한다.

이벤트 전파를 막는법

이벤트 전파를 막으려면 이벤트 타겟에게 event.stopPropagation() 메소드를 사용하여 버블링 이벤트 리스너를 막을 수 있다.

<form action="">
	<button type="submit" class="submit">제출</button>
</form>

<script>
	const submit = document.querySelector('.submit');
	submit.addEventListener('click', (event) => {
	    console.log('clicked');
	    event.preventDefault();
		event.stopPropagation();
	});
	
	document.body.addEventListener('click', () => {
	    console.log('event still alive!');			// 해당 이벤트는 stopPropagation를 때문에 
  													// 실행되지 않는다.
	});
</script>

다만 캡처링 이벤트 리스너는 막을 수 없다.

document.body.addEventListener('click', () => {
	    console.log('event still alive!');		
		},true		// addEventListener에 세번째 인자로 true를 주면 캡처링 이벤트 리스너가 된다.
                    // 이 경우 자식이 stopPropagation를 쓰더라도 작동한다.
  	);

자바스크립트에서 이벤트를 처리하다보면 가끔 내가 원하는대로 동작하지 않는 경우가 있다. 그런 경우 땜질하듯이 이리 저리 어떻게든 막았던 기억이있는데 이벤트 전파에 대해 제대로 이해하니 좀 더 단단한 코딩을 할 수 있을 것 같다.