이벤트 위임이란? EventDelegation

 

저번 포스팅에선 버블링과 캡처링에 대해 알아보았다

버블링과 캡처링이 브라우저에서 이벤트가 발생하고 동작하는 방식, 그 자체에 대한 용어라면

이벤트 위임은 이러한 방식을 이용한 기술이라고 할 수 있다

 

자바스크립트에서 동적인 요소의 이벤트를 처리할 때,

만약 투두 리스트를 만든다는 가정하에

 

<ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
</ul>

 

1부터 10까지의 자식 요소인 list가 있고

그 자식 요소들을 ul이라는 부모 요소가 감싸고 있다고 가정해보자

 

이 경우, 자식 요소인 <li>를 클릭하면 할 일을 완료했다는 의미에서 밑줄을 치거나 없애는 이벤트를 등록할 때

<li> 자체에 이벤트 핸들러를 등록하여 documentqueryselectorall + forEach 구문을 이용할 것이다

 

위의 코드 블록처럼 1~10까지의 요소들만 존재한다면 별 문제는 없겠지만,

동적으로 계속 생성 및 삭제를 반복해가며 또한 단순히 몇 개의 li가 아닌 무수히 많은 li를 처리한다고 하면

그 많은 요소들에 일일이 이벤트 핸들러를 등록한다는 의미이다

이는 당연히 브라우저에게 부담을 줄 수밖에 없고, 계속 불필요하게 늘어나는 메모리로 인해 과부하가 걸릴 것이다.

 

바로 이런 경우에 사용할 수 있는 기술이 이벤트 위임이다.

 

이벤트 위임이란? 위에처럼 동적으로 노드를 생성하거나 삭제할 때 각각의 노드에 개별적으로 이벤트 핸들러를 등록하는 것이 아닌

가장 상위의 부모 노드에게 이벤트 핸들러를 등록하여 하위 노드들의 이벤트를 제어하는 방식이다.

이미지 출처 : https://riptutorial.com/dom/example/1344/event-bubbling-and-capturing

 

그리고 여기서 상위의 부모 노드에게 이벤트 핸들러를 등록하는데 어떻게 하위 노드들에게 이벤트가 등록이 되어 제어가 되느냐?

라는 의문이 있다면 이는 캡쳐링을 이용한 것이다.

전에 포스팅했던 버블링과 캡처링을 먼저 보고 오길 추천한다

 

 

https://letsgojieun.tistory.com/53

캡처링과 버블링 + event.stopPropagation외에 이벤트를 막는 방법

 

 

아무튼 간단한 코드 예제를 추가하자면

 

<ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
</ul>

 

위의 HTML에서

 

li.addeventlistener ~ 로 시작하는 것이 아닌,

ul.addeventlistener ~ 로 부모 노드인 ul에 이벤트 핸들러를 등록하고

그 안의 코드 블록 { }에서 li 요소들을 제어하는 코드를 등록하는 것이다.

 

 

 

이렇게 이벤트 위임 방법을 이용하여

불필요한 메모리 낭비를 막고 좀 더 효율적으로 코드 작성이 가능하다

단, 따로 이벤트 위임을 하지 않을 하위 노드가 존재한다면 부모 노드에 이벤트 핸들러를 등록 시

불필요한 이벤트 발생 가능성이 있으므로 따로 이벤트 처리를 해줘서 예외사항으로 두어야 한다.