[JavaScript] 이벤트 위임(Event Delegation)

이벤트를 공부하면서 버블링을 공부하고 최종적으로 좋은 코드를 위해서는 이벤트 위임이 중요하다는 것을 알게되어 정리를 해보았다.

이벤트 위임이란?

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

이벤트 위임 코드 패턴의 장점

• 부모 요소에만 이벤트를 등록하기 때문에, 자식 요소에 추가, 삭제가 자유롭다.
• 메모리 공간의 사용량을 줄일 수 있다.
  
  

이벤트 위임 코드

아래의 코드처럼 querySelectorAll을 이용하여 모든 input의 요소를 가져와서 일일이 이벤트를 등록하는 것은 좋은 코드가 아니다. (forEach문으로 모든 input을 돌면서 일일이 이벤트를 추가하는 코드)

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

<script>
let inputs = document.querySelectorAll('input');
inputs.forEach(function(input) {
	input.addEventListener('click', function(event) {
		alert('clicked');
	});
});
</script>

아래의 코드처럼 input의 상위 요소인 ul태그에 이벤트를 등록하여 일괄적으로 처리하는 것이 좋다. 즉, 부모 안에 있는 자식들에게 공통적으로 무언가 처리를 해야 될 때, 부모 요소에 이벤트를 적용하는 것이 좋은 코드다.

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

이벤트 위임은 이벤트 버블링을 이용한 방법이다.

참고자료

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