Event Delegation

이번 포스팅은 지난 (7) 번째 이벤트 버블링과 캡처와 연결된다. 이벤트 위임은 실제 바닐라 JS로 웹앱을 만들때 자주 사용된다.

이벤트 위임은 한문장으로 설명하면 하위 요소에 각각 이벤트를 바인딩하는 것이 아닌, 상위 요소에서 하위 요소를 바인딩하는 것 이다.

아래 예제를 보자

Example Code

<index.html>

<h1>TODO list</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>

<script.js>

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

위와 같이 각 item에 이벤트를 바인딩 할 수 있다. 하지만 만일 CSR에서 innerHTML을 추가하게 되면 추가로 바인딩 해줘야 하는 단점이 있다. 이를 아래와 같이 수정하면 한번에 해결 할 수 있다.

<sriptUpgrade.js>

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

위와 같이 상위 Dom에서 접근할 수 있도록 하는 것이 이벤트 Delegation이다.

참고로 위 코드는 하위에 있는 모든 요소에 이벤트를 바인딩 하는 것이기 때문에 만일 특정 요소(ex> li 태그)에만 적용하고 싶으면 추가로 로직이 필요함