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

** 초보 개발자로 글에 수정해야 할 부분이 있을 수 있습니다. 정정해야 할 부분은 댓글로 소통 부탁드립니다!

 

효율적인 이벤트 핸들링을 하려면 어떻게 해야할까요?

각 Dom element 마다 이벤트를 거는 것이 아니라 

상위의 dom element 에 이벤트를 걸고, 이벤트가 발생한 target 을 찾아 이벤트를 핸들링하는 것입니다.

 

이러한 방법을 이벤트 위임(Event Delegation)이라고 합니다.

코드로 살펴봅시다!

 

STEP 01 _ Event Delegation 예제코드

"테이블 내의 td 클릭 시 하이라이트 효과"를 주어야 하는 경우로 가정해봅니다.

 

1) event.target 사용

 

$('.table').on('click', (e) => {
	let target = event.target; // 클릭이 어디서 발생했을까요?

	if (target.tagName != 'TD') return; // TD에서 발생한 게 아니라면 아무 작업도 하지 않습니다

	highlight(target); // 강조 함
});

 

2) event.target.closest 사용

$('.table').on('click', (event) => {
	let td = event.target.closest('td'); // (1)

  	if (!td) return; // (2)

  	if (!table.contains(td)) return; // (3)

  	highlight(td); // (4)
});

 

(1) 가장 가까운 td 를 찾음

(2) td 가 없으면 아무것도 하지 않음

(3) table 내의 td 가 아니라면, 아무것도 하지 않음

(4) 해당 td 를 highlight

 

3) event delagation + dataset 사용

<button data-toggle-id="subscribe-mail">
  구독 폼 보여주기
</button>

<form id="subscribe-mail" hidden>
  메일 주소: <input type="email">
</form>

$('.table').on('click', (event) => {
	let id = event.target.dataset.toggleId;
    
    if (!id) return;

    let elem = document.getElementById(id);

    elem.hidden = !elem.hidden;
});

 

STEP 02 _이벤트 위임의 장점과 단점

1) 장점

• 많은 핸들러를 할당하지 않아도 됨 => 초기화 단순해짐,  메모리 절약, 코드 짧아짐 

 

2) 단점

• 이벤트가 반드시 버블링 되어야 함
• 응답할 필요가 있는 이벤트이든, 아니든 상관없이 모든 하위 컨테이너에서 발생하는 이벤트에 응답해야 함 => CPU 작업 부하 증가 (하지만, 무시할만한 수준임)

 

 

[References]

이벤트 위임