[javascript] 이벤트 버블링, 이벤트 캡쳐, 이벤트 위임

! 공식문서를 참고해서 개념을 다시 한번 확인해주세요 !

 

1. 이벤트 버블링 event bubbling

-특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되는 이벤트 전파 방식

-가장 아래에 있는 태그에서 이벤트가 발생했을 때 최상위 요소 태그까지 이벤트가 전달됨

-브라우저는 특정 화면 요소에서 이벤트가 발생했을 때 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전파시키기 때문에 하위 -> 상위 -> 최상위 순으로 클릭 이벤트가 진행됨

 

2. 이벤트 캡쳐 event capture

-이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식

-특정 이벤트가 발생했을 때 최상위 요소에서 해당하는 태그를 찾아 내려감

-capture의 default값은 false이기 때문에 capture: true를 설정해줘야 함

ex.

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

-최상위->상위->하위 순으로 클릭 이벤트가 진행됨

 

3. event.stopPropagation()

 -원하는 화면 요소의 이벤트만 신경쓰고 싶은 경우에 사용

-이벤트 버블링의 경우 클릭한 요소의 이벤트만 발생시키고 상위 요소로 이벤트를 전달하는 것을 방해

-이벤트 캡처의 경우 클릭한 요소의 최상위 요소의 이벤트만 동작시키고 하위 요소들로 이벤트를 전달하지 않음

 

4. 이벤트 위임 event delegation

-하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식

ex.

html

<h1>오늘의 할 일</h1>
<ul class="itemList">
	<li>
		<input type="checkbox" id="item1">
		<label for="item1">이벤트 버블링 학습</label>
	</li>
	<li>
		<input type="checkbox" id="item2">
		<label for="item2">이벤트 캡쳐 학습</label>
	</li>
</ul>

 

js-이벤트 위임 사용 전

var inputs = document.querySelectorAll('input');
inputs.forEach(function(input) {
	input.addEventListener('click', function(event) {
		alert('clicked');
	});
});

input에 이벤트 리스너를 다는 경우 새로운 input을 만들면 거기에는 이벤트가 작동하지 않음

 

js-이벤트 위임 사용 후

var itemList = document.querySelector('.itemList');
itemList.addEventListener('click', function(event) {
	alert('clicked');
});

input의 상위 태그인 ul에 이벤트 리스너를 달아 새로운 input을 만들어도 이벤트 버블링으로 인해 이벤트가 작동함

 

Resources

https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/#%EC%9D%B4%ED%95%B4%EA%B0%80-%EC%9E%98-%EC%95%88%EB%90%98%EC%8B%9C%EB%82%98%EC%9A%94-%EB%B0%A9%EC%86%A1%EC%97%90%EC%84%9C-%EC%A7%81%EC%A0%91-%EB%AC%BC%EC%96%B4%EB%B3%B4%EC%84%B8%EC%9A%94-