이벤트 위임(Event Delegation)

자바스크립트 이벤트 위임(Event Delegation)은 하위 요소들에 각각 이벤트 핸들러를 할당하는 대신, 상위 요소에 하나의 이벤트 핸들러를 할당하여 하위 요소들의 이벤트를 처리하는 방식이다.

 

예를 들어 매니저와 직원들이 있는 식당이 있다면 기존에는 직원들이 각각 주문을 받고 서빙까지 했다면 이제는 매니저가 주문을 받고 직원들에게 서빙을 지시하는 상황이라고 할 수 있다.

 

이벤트 위임의 개념

1. 상위 요소에서 하위 요소의 이벤트를 처리
   • 각 요소에 개별적인 이벤트 핸들러를 할당하는 대신, 상위 요소에 하나의 이벤트 핸들러를 할당하여 하위 요소의 이벤트를 처리한다.
2. 이벤트 버블링 활용
   • 이벤트 위임은 이벤트 버블링 현상을 이용하여 상위 요소에서 하위 요소의 이벤트를 감지하고 처리한다.

2. 이벤트 위임의 작동 방식

1. 상위 요소에 이벤트 핸들러 할당
   • 이벤트를 처리할 상위 요소에 addEventListener 메서드를 사용하여 이벤트 핸들러를 등록한다.
2. 이벤트 대상 확인
   • 이벤트 핸들러 내부에서 event.target 속성을 사용하여 실제 이벤트가 발생한 하위 요소를 확인한다.
   • event.target은 이벤트가 발생한 가장 안쪽의 요소를 가리킨다.
3. 조건부 이벤트 처리
   • 확인된 event.target에 따라 필요한 이벤트 처리를 수행한다.
   • 예를 들어, 특정 클래스를 가진 요소에서 이벤트가 발생했을 때만 특정 동작을 수행하도록 조건을 설정할 수 있다.

3. 이벤트 위임의 장점

 

• 메모리 효율성
  • 많은 하위 요소에 개별적인 이벤트 핸들러를 할당하는 것보다 하나의 핸들러만 할당하므로 메모리 사용량을 줄일 수 있다.
• 성능 향상
  • 이벤트 핸들러 수가 줄어들면 이벤트 처리 속도가 향상되어 웹 페이지의 성능이 개선된다.
• 동적 요소 처리 용이
  • 동적으로 추가되는 하위 요소들에 대해 별도의 이벤트 핸들러를 할당할 필요가 없어 코드가 간결해지고 유지보수가 쉬워진다.
• 코드 간결성 및 유지보수성 향상
  • 코드를 간결하게 유지하고, 유지보수를 용이하게 한다.

예시

<ul id="myList">
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ul>

<script>
const myList = document.getElementById("myList");

myList.addEventListener("click", function (clickedEvent) {
  if (clickedEvent.target.tagName === "LI") {
    alert(clickedEvent.target.textContent + "가 클릭되었습니다.");
  }
});
</script>

• 위 코드에서 ul 요소에 하나의 이벤트 핸들러를 할당하고, 클릭된 요소가 li 요소인지 확인하여 알림 메시지를 표시합니다.
• const myList = document.getElementById("myList");
  • myList라는 id를 가진 요소를 myList라는 변수에 할당한다.
• myList.addEventListener("click", function (clickedEvent)
  • myList에 이벤트리스너를 추가한다.
  • 클릭하면 알아채서 clickedEvent라는 함수가 발동하도록한다.
• clickedEvent.target.tagName === "LI"
  • 만약에 이벤트가 발생했다면(해당 이벤트 리스너라면 클릭)
  • clickedEvent라는 이벤트 객체를 생성하여 정보를 담는다.
  • 여기의 clickedEvent는 객체 clickedEvent 로써 새로 생성된 것이고 함수 clickedEvent와는 다르다.
  • 담는 정보는 어떤 요소에서 이벤트가 발생했는지 (event.target)
  • 어떤 종류의 이벤트가 발생했는지 (event.type)
  • 마우스 좌표 (event.clientX, event.clientY) 등이다.
• clickedEvent.target
  • clickedEvent 객체의 속성 중 하나로 실제로 이벤트가 발생한 요소를 가리킨다.
  • 이벤트 버블링 설명에서 나오는 타깃 단계의 타깃과 동일한 의미이다.
  • 앞서말한 이벤트 객체에 저장된 정보를 불러오는 것이기 때문에 타깃이 아니라
  • type, clientX, clientY, key 등 다양한 속성이 있다.
• clickedEvent.target.tagName
  • 타깃의 태그명을 대문자로 반환한다.
• clickedEvent.target.tagName === "LI"
  • 태그명이 LI인지 ===(엄격한 동등 비교 연산자)로 확인한다.
  • 앞서 태그명이 대문자로 반환되어서 반드시 비교 대상도 대문자여야 한다.
• if (clickedEvent.target.tagName === "LI")
  • clickedEvent.target.tagName === "LI"가 True(참)라면 참에 해당하는 코드 블록을 실행한다.
• alert(clickedEvent.target.textContent + "가 클릭되었습니다.");
  • 참일 때 실행되는 코드블록이다.
• alert()
  • 괄호안을 내용을 문자열로 변환하여 브라우저 창에 경고 메시지로 띄운다.
• clickedEvent.target.textContent
  • 앞서 말한 실제 이벤트가 발생한 타깃의 텍스트 콘텐츠를 가져온다.
• clickedEvent.target.textContent + "가 클릭되었습니다."
  • 텍스트 콘텐츠 + "가 클릭되었습니다."를 합친 문자열을 만든다.
• 결과적으로는 클릭 이벤트가 발생했다는 사실과 타깃의 정보를 부모 요소가 가진 이벤트 리스너가 감지하여 정해진 이벤트를 발생시키는 방식이다.
• 이는 이벤트 버블링 현상으로 인해서 이벤트의 발생이 부모 요소로 전파되기 때문에 실제로 자식 요소에 이벤트리스너가 설정되어 있지 않아도 이벤트가 발생한 자식이 누군지와 어떤 이벤트가 발생했는지(클릭)를 부모 요소가 얻을 수 있기 때문이다.
• 해당 방식이 이벤트 위임(이벤트 델리게이션)의 작동 방식이다.
• 실제로는 이벤트가 부모요소에만 있지만 자식 요소에서 무슨 이벤트가 발생했는지는 알기 때문에 부모 요소에서 이벤트 핸들러를 실행하여 필요한 동작을 수행할 수 있는 것이다.
• 때문에 해당 방식은 이벤트 동작을 동일하게 설정한다면 자식 요소가 개별로 이벤트를 발동시키든 부모 요소가 버블링으로 정보를 얻어서 적절한 이벤트를 발동시키든 결과는 동일하다.

하지만 이러한 위임 방식은 다음과 같은 장점을 가진다.

 

• 메모리 효율성과 성능 향상
  • 부모 요소에 하나의 이벤트 리스너만 등록하면 되므로 메모리 사용량과 성능을 향상시킬 수 있다.
  • 프로그램이 실행될 때 자식 요소에 등록된 모든 이벤트를 일단 메모리에 저장하기 때문이다.
  • 때문에 자식 요소 개개에 이벤트가 있는 것보단 하나의 부모 요소에만 있는 편이 훨씬 메모리를 차지하는 용량이 적어진다.
• 동적 요소 처리
  • 새로 자식이 추가되어도 자식 요소에 대해 별도의 이벤트 리스너를 등록할 필요가 없다.
• 유지 보수성
  • 이벤트 처리 코드를 부모 요소에 집중시켜 코드의 간결성과 유지 보수성을 높일 수 있다.