이벤트 캡처링, 버블링, 위임

이벤트 캡처링, 버블링, 위임은 이벤트 전달방식!

이벤트 버블링

특정 요소에서 이벤트가 발생했을 때 해당 요소가 더 상위의 화면 요소들로 전달되어 가는 특성을 말한다.

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

브라우저는 특정 화면 요소에서 이벤트가 발생했을 때 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전파시키기 때문에 최하위 태그 className =’three’를 클릭시 콘솔창에는 three, two, one 출력이 된다.

이렇게 하위에서 상위요소로 이벤트를 전파하는 방식을 이벤트 버블링이라고 한다.

이벤트 캡처링

이벤트 캡처링은 버블링과 반대방향으로 상위요소부터 이벤트가 발생한 해당요소로 전달되는 특성을 말한다.

<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, {
		capture: true // default 값은 false입니다.
	});
});

function logEvent(event) {
	console.log(event.currentTarget.className);
event.stopPropagation();
}

이벤트 캡처링을 구현하고 싶다면 addEventListener() API에서 옵션 객체에 capture:true를 설정해주면 된다. 설정 하지 않을 시 디폴트 값은 false이다.

캡처링은 버블링과 반대로 전파방식이 상위에서 부터 시작되기 때문에 최하위 태그 className =’three’를 클릭시 콘솔창에는 one, two, three 출력이 된다.

event.stopPropogation()

만약 버블링과 캡처링과 같은 이벤트 전달 방식을 무시하고 원하는 해당 요소의 이벤트만 핸들링 하고 싶을 때 사용하는 웹 API이다.

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

위의 코드를 버블링과 캡처링의 예제코드 이벤트에 추가해주면 최하위 태그 className =’three’를 클릭했을 때 이벤트 버블링의 경우 ‘three’ 캡처링의 경우 가장 상위의 요소의 className인 ‘one’이 출력된다.

이벤트 위임

하위요소에 각각 이벤트를 부여하지 않고 상위요소에 이벤트를 부여함으로써 이벤트를 핸들링하는 방식

<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>

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

각 input의 요소에 클릭했을 때 알림창이 나오는 이벤트를 부여한다고 했을 때

js로 아래와 같이 새 리스트를 추가하는 코드를 짰을 때

// ...

// 새 리스트 아이템을 추가하는 코드
var itemList = document.querySelector('.itemList');

var li = document.createElement('li');
var input = document.createElement('input');
var label = document.createElement('label');
var labelText = document.createTextNode('이벤트 위임 학습');

input.setAttribute('type', 'checkbox');
input.setAttribute('id', 'item3');
label.setAttribute('for', 'item3');
label.appendChild(labelText);
li.appendChild(input);
li.appendChild(label);
itemList.appendChild(li);

새로 동적으로 생긴 리스트의 경우에는 인풋 박스에 클릭 이벤트 리스너를 추가하는 시점에서 리스트 아이템은 두 개이므로 클릭 이벤트가 부여되지 않는다.

이런 경우 상위요소인 itemlist에 클릭 이벤트를 부여해준다면 하위 요소를 클릭해도 이벤트 버블링이 일어나 상위에서 이벤트가 발생하므로 위와 같이 하위에 새로 요소가 생기는 경우를 신경쓰지 않아도 된다는 장점을 가지고 있다.

Author And Source

이 문제에 관하여([TIL]이벤트 캡처링, 버블링, 위임), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@wong0220/TIL이벤트-캡처링-버블링-위임

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)