이벤트 위임

이벤트위임이란?

버블링 캡처링을 통한 이벤트 전파를 통해 상위 요소에서 이벤트 핸들링을 하는 것을 말한다.

event.target을 통해 어떤 위치에서 이벤트가 일어났는지 특정할 수 있다.

 

 

 

예시 1

<table>
  <tr>
    <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
  </tr>
  <tr>
    <td class="nw"><strong>Northwest</strong><br>Metal<br>Silver<br>Elders</td>
    <td class="n">...</td>
    <td class="ne">...</td>
  </tr>
  <tr>...2 more lines of this kind...</tr>
  <tr>...2 more lines of this kind...</tr>
</table>

table이 있고 tr, td들이 들어있는 테이블 구조가 있다고 하자. 여기서 원하는 cell(td)을 클릭하면 색상이 바뀌도록 바꾸고 싶다고 하자.

이때 td들에 일일이 다 이벤트 리스너를 부여하는 방식은 매우 코드가 많아지고 반복적인 요소가 많아지게 된다.

그러나 이벤트 위임으로 table에 eventListener를 할당하고, 어디에서 이벤트가 발생했는지를 event.target으로 알아낸다면

더욱 짧은 코드로도 기능을 구현할 수 있다.

table.onclick = function(event) {
  let td = event.target.closest('td'); // (1)

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

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

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

 

 

 

 

예시 2

<div id="menu">
  <button data-action="save">저장하기</button>
  <button data-action="load">불러오기</button>
  <button data-action="search">검색하기</button>
</div>

td같은것이 아니라 저장하기, 불러오기, 검색하기 등 다른 로직을 실행시키는 버튼에도 적용 가능하다.

menu라는 상위 요소에 eventListener를 할당하고, button들에도 특정할 수 있는 dataset을 추가하던가, class를 추가하는 방식으로 이벤트 위임을 설계할 수 있다.

그리고 event.target이 어떤 부분에서 일어났는지 분기 설정을 통해 원하는 기능을 실행시킬 수 있다.