[JavaScript 자바스크립트] 이벤트 델리게이션 패턴

자바스크립트의 대표적인 디자인패턴 중 하나로, 캡쳐링을 이용해 이벤트 리스너 (Event Listener) 를 효율적으로 관리할 수 있다

 

이벤트 델리게이션 패턴 사용하기

버튼마다 다른 기능을 수행한다고 했을 때 리스너를 전부 등록하게 되면 브라우저의 메모리를 많이 사용하게 되고, 성능저하로 이어질 수 있다

이것을 해결하기 위해상위 요소에 이벤트 리스너를 등록하고 이벤트가 발생할 target을 찾아 이벤트를 지정하는 것

 

 

• 상위 요소인 parent에 클릭 이벤트 리스너 등록
• event.target 으로 클릭된 요소가  child 클래스를 가진 버튼인지 확인하고 이벤트를 수행한다

 

<div id="parent">
  <button class="child">Button 1</button>
  <button class="child">Button 2</button>
  <button class="child">Button 3</button>
</div>

 

// 상위 요소에 이벤트 리스너 추가
document.getElementById('parent').addEventListener('click', function (event) {

  // 이벤트가 발생한 요소가 특정 클래스인지 확인
  if (event.target.classList.contains('child')) {
    alert(`You clicked: ${event.target.textContent}`);
  }
});