이벤트위임

이벤트 위임

이벤트 위임이란 상위 요소에서 하위 요소의 이벤트를 다루기 위한 방법입니다. 비슷한 형태의 여러 요소를 다뤄야할때, 각 요소마다 이벤트핸들러를 할당하지 않고 부모에 이벤트 핸들러를 단 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있도록 도와줍니다.

이벤트 위임은 다음과 같은 알고리즘으로 동작합니다.

컨테이너에 하나의 핸들러를 할당합니다.
핸들러의 event.target을 사용해 이벤트가 발생한 요소가 어디인지 알아냅니다.
원하는 요소에서 이벤트가 발생했다고 확인되면 이벤트를 핸들링합니다.

만약 비슷하지만 다른 값을 가진 리스트가 있으며 그 항목을 클릭했을때 해당 요소에 색깔을 주는 이벤트를 주어야한다고 가정하겠습니다.

<ul>
	<li>빨강색</li>
    <li>노랑색</li>
    <li>파랑색</li>
 </ul>

각각 li에 클릭 시 색깔을 바꾸는 이벤트를 할당하면 쉽게 구현할 수 있습니다.

    <script>
      function changeColor(target) {
        target.style.color = "pink";
      }
    </script>
    <ul>
      <li onclick="changeColor(this)">빨강색</li>
      <li onclick="changeColor(this)">노랑색</li>
      <li onclick="changeColor(this)">파랑색</li>
    </ul>

그러나 이렇게 각 요소마다 이벤트를 할당하는 방식 대신 부모에 모든 이벤트를 잡아내는 핸들러를 사용하여 간단하게 구현할 수 있습니다.

    <ul id="listParent">
      <li>빨강색</li>
      <li>노랑색</li>
      <li>파랑색</li>
    </ul>
    <script>
      function changeColor(target) {
        target.style.color = "pink";
      }
      let targetElement = document.getElementById("listParent");
      targetElement.addEventListener("click", function (event) {
        let element = event.target;
        if (element.tagName != "LI") return;
        changeColor(element);
      });
    </script>

위와같이 작업이 리스트 항목이 수백개가 증가하더라도 간단하게 작성할 수 있습니다. 만약 이벤트의 이름이나 속성이 변하더라도 정의된 함수만 수정함으로서 유지보수가 용이해질 것입니다.

단, 위와같이 작업시 주의해야할 것이 있습니다.
만약 대상 요소안에 다른 요소가 중첩해있으며, 대상요소가 아닌 중첩요소에서 이벤트가 발생할 경우 위에 함수가 정상적으로 발생하지 않을 것입니다.(element.tagName이 LI가 아닌 그 중첩요소가 되므로)

elem.closest(selector)

: elem의 상위 요소 중 selector와 일치하는 가장 근접한 조상 요소를 반환합니다. 위 코드에선 이벤트가 발생한 요소부터 시작해 위로 올라가며 가장 가까운 '대상' 요소를 찾습니다.

위 코드를 보완하면 아래와 같이 작성할 수 있습니다.

 <ul id="listParent">
      <li><strong>빨강색</strong></li>
      <li><strong>노랑색</strong></li>
      <li><strong>파랑색</strong></li>
 </ul>
 <script>
      function changeColor(target) {
        target.style.color = "pink";
      }
      let targetElement = document.getElementById("listParent");
      targetElement.addEventListener("click", function (event) {
        let element = event.target.closest("li");
        console.log(element.tagName);
        if (!element) {
          return;
        } else {
          changeColor(element);
        }
      });
 </script>

클릭 이벤트가 strong 태그에서 발생하더라도 가장 가까운 li태그를 반환하여 정상적으로 처리가 가능합니다.

주의

• currentTarget과 target 은 다릅니다. currentTarget은 클릭이벤트가 부착된 부모요소를 가리키며 target은 실제 이벤트가 발생한 요소를 가리킵니다.

출처 :
해당글은 JAVASCRIPT.INFO를 참고하여 작성되었습니다.