[Javascript] 이벤트 버블링

1. 이벤트 등록

이벤트 버블링에 알기 전에 앞서 이벤트 등록에 대해 알아봅니다.

var button = document.querySelector('button');
button.addEventListener('click', addItem);

function addItem(event) {
	console.log(event);
}

웹 개발을 하셨던 분이라면 익숙한 코드지요? 버튼을 클릭했을 경우 addItem 함수를 실행시키는 코드입니다.

버튼을 클릭하면 addItem함수가 실행되고, event 인자가 넘어오며, console.log를 통해 event에 관련된 정보를 알 수 있게 됩니다.

동작 원리는 이러한데, 브라우저는 어떻게 이벤트를 감지할까요?

2. 이벤트 버블링

이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때, 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가능 특성을 의미합니다.(하위 -> 상위)

아래와 같은 코드가 있다고 가정합니다.

<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);
}

위 자바스크립트는 3개의 div에 모두 클릭이벤트를 등록하고, 클릭했을때 해당 클래스 이름을 출력하는 코드입니다.

그리고 제일 하위에 있는 div를 클릭하게 되면

제일 하위부터 상위까지의 div 클래스 이름이 출력됩니다.

이것과 같이 동작하는 것을 이벤트 버블링이라고 합니다.

이벤트 버블링이 발생하는 이유는 브라우저가 이벤트를 감지하는 방식 때문인데, 브라우저는 특정화면요소에서 이벤트가 발생했을 때, 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전파합니다.

3. 이벤트 캡처

이벤트 캡처는 이벤트 버블링과 반대로 상위에서 하위로 흘러가는 진행 방식입니다.

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);
}

이벤트 버블링과 반대로 이벤트 캡처를 사용하려고 한다면 addEventListener의 옵션에 capture:true를 적용해주시면 됩니다.

그러면 위의 three가 있는 클래스를 클릭할 경우

상위에서 하위로 이벤트가 전파되어 출력이 됩니다.

4. event.stopPropagation()

이런 복잡한 이벤트의 전달방식을 신경쓰고 싶지 않다면 이벤트 속성에서 이벤트가 전파되는 것을 막는 stopPropagation() 함수를 사용하면 됩니다.

function logEvent(event) {
	event.stopPropagation();
}

참고

https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/

저작자표시 변경금지

'FrontEnd > ES&JS 문법' 카테고리의 다른 글

[Javascript] this 정리 (0)	2022.10.20
[Javascript] 브라우저 동작 원리, 렌더링 트리 (0)	2022.10.19
[Javascript] 이벤트 루프와 태스크 큐 (0)	2022.10.18
[Javascript] 호이스팅이란? (0)	2022.10.17
[Typescript] 자주 쓰는 문법 정리 (1)	2022.09.08