[JS] 자바스크립트 이벤트 위임( Event Delegation )

 

이벤트 위임이란?

 

여러개의 하위 DOM 요소에 각각 이벤트 핸들러를 등록하는 대신

하나의 상위 DOM 요소에 이벤트 핸들러를 등록하는 방법을 말한다.

 

 

 

 

 

 <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>

 

 

안 좋은 예

 <script>
      const li = document.querySelectorAll("li");
      li.forEach((li) => {
        li.addEventListener("click", () => {
          li.classList.add("selected");
        });
      });
    </script>

 

 

 

부모 안에 있는 자식들에게 공통적으로 무언가 처리해야 할 때 

이렇게 일일히 이벤트 리스너를 자식 노드에 추가하는 것은 좋지 않다.

 

 

 

이벤트 위임을 사용한 예

 <script>
      const ul = document.querySelector("ul");
      ul.addEventListener("click", (event) => {
        if (event.target.tagName == "LI") {
          event.target.classList.add("selected");
        }
      });
    </script>

 

 

ul에 이벤트 리스너를 한번만 등록한다. 

 

이벤트에는 currentTarget과 target이라는 정보가 있기 때문에 원하는 target에만 집중적으로 처리를 해줄 수 있다.

이렇게 부모에 등록하는 Event Delegation 이벤트 위임을 쓰는 것이 좋은 방법이다.