Skip to content

Latest commit

 

History

History
33 lines (22 loc) · 2.33 KB

Event Delegation.md

File metadata and controls

33 lines (22 loc) · 2.33 KB

이벤트 위임(Event Delegation)

이벤트 위임(Event Delegation)은 자바스크립트에서 효율적인 이벤트 핸들링을 위한 기법입니다. 이 기법은 이벤트 버블링(bubbling)을 활용합니다. 이벤트 버블링이란 특정 요소에서 이벤트가 발생했을 때, 해당 이벤트가 상위 요소로 전파되는 특성을 말합니다.

이벤트 위임을 사용하는 주요 이유는 여러 자식 요소에 각각 이벤트 리스너를 할당하는 대신, 그들의 공통 부모 요소에 하나의 이벤트 리스너를 할당함으로써 메모리 사용을 줄이고, 리스너 관리를 간편하게 할 수 있다는 점입니다. 이 방법은 특히 동적으로 콘텐츠가 추가되거나 제거될 때 유용합니다.

예를 들어, 만약 여러개의 <li> 태그를 가진 <ul> 리스트가 있고, 각 <li> 태그를 클릭했을 때 이벤트를 처리하고 싶다면, 각각의 <li> 요소에 이벤트 리스너를 추가하는 대신, <ul> 요소에 하나의 이벤트 리스너를 추가하여 이벤트 위임을 사용할 수 있습니다. 사용자가 <li> 중 하나를 클릭하면, 이벤트는 <li>에서 발생하여 <ul>로 버블링되고, <ul>에 할당된 이벤트 리스너가 이를 잡아 처리합니다.

이벤트 위임을 사용할 때, 이벤트 객체 내부의 target 속성을 확인하여 실제로 클릭된 요소가 무엇인지 식별할 수 있습니다. 이를 통해 특정 자식 요소에 대한 클릭만을 처리할 수 있습니다.

document
  .getElementById("ulElement")
  .addEventListener("click", function (event) {
    if (event.target.tagName === "LI") {
      // LI 요소가 클릭됐을 때만 작업 수행
    }
  });

이벤트 위임의 장점

  • 메모리 절약: 각 요소에 이벤트 핸들러를 추가하는 대신 하나만 추가하므로 메모리 사용이 감소합니다.
  • 관리 용이성: 모든 핸들러를 한 곳에서 관리할 수 있으므로 유지보수가 쉬워집니다.
  • 동적 요소에 대한 이벤트 핸들링: 페이지가 로드된 후에 추가되는 요소들(예: AJAX로 불러온 내용)에 대해서도 부모 요소에 할당된 이벤트 리스너를 통해 이벤트를 처리할 수 있습니다.

Reference

Back