자바스크립트에서의 이벤트 위임(Event Delegation)

❓ 이벤트 위임이란
이벤트위임은 이벤트 핸들링 패턴 중 하나로, 요소마다 이벤트 핸들러를 할당하지않고, 요소의 공통의 조상에서 이벤트 핸들러를 할당해 사용하는 방식이다.
이벤트 위임

✍ 이벤트을 사용하게 되면 얻는 이점

1. 메모리 사용량 감소

• 개별적인 각각의 이벤트 핸들러를 등록하는 대신에, 그 요소들을 감싸는 상위 컨테이너에 하나의 리스너를 등록해 메모리 사용량이 줄어든다.

2. 동적인 요소 처리

• 동적으로 추가되거나 제거되는 요소들도 자동으로 해당 이벤트 내에서 대응할 수 있게된다, 조건에 맞는 새로운 상위 컨테이너 내부의 요소가 추가되면, 자동으로 해당 이벤트가 적용되어 처리할 수 있어지게 된다.

3. 코드 유지보수 용이성

• 중복된 코드가 줄어들고 (DRYDRYDRY!!)
• 관련된 로직을 한곳에서 관리할 수 있게되 코드의 유지보수가 용이해진다.

💭 이벤트 위임 사용 전 후

이벤트 위임을 사용하지 않고 각각의 노드에 핸들러에 할당한 코드

• 각각의 button 들에게 이벤트를 연결해야하는 반복적인 로직이 사용되고 있다.
• 또한 버튼이 많아지면 질수록 중복된 코드가 증가하여, 유지보수에 어려움을 초래할 수 있어진다.

/* html */
<div id="buttons-container">
  <button id="button-1">Button 1</button>
  <button id="button-2">Button 2</button>
  <button id="button-3">Button 3</button>
</div>

/* js */

document.getElementById('button-1').addEventListener('click', function() {
   handleClick(1);
});

document.getElementById('button-2').addEventListener('click', function() {
   handleClick(2);
});

document.getElementById('button-3').addEventListener('click', function() {
   handleClick(3);
});

function handleClick(buttonId) {
   // 버튼 클릭 처리 로직
}

해당 코드를 이벤트 위임을 사용해서 리팩토링하면?

• 상위 컨테이너인 buttons-container에 이벤트핸들러 등록
• handleClick 함수 내부에서 event.target.matches('button')를 사용해, 클릭된 엘리튼트가 버튼인지 확인하고, 클릭된 엘리먼트가 버튼일 경우, 해당 버튼 클릭에 대한 로직을 공통적으로 처리할 수 있다.
• 즉, 모든 버튼의 클릭 이벤트를 상위 컨테이너에서 담당하게 되는 것이다.

/* html */
<div id="buttons-container">
  <button id="button-1">Button 1</button>
  <button id="button-2">Button 2</button>
  <button id="button-3">Button 3</button>
</div>

const container = document.querySelector('.buttons-container')

const handleClick = (e) => {
	if(e.target.matches('button')){
    	//버튼 클릭 이벤트 로직 추가
    }

}

container.addEventListener('click', handleClick)

🌻 이벤트 위임 구현시 자주 사용되는 메서드

🥝 이벤트 위임 구현시 사용할 수 있는 메서드는 아래 소개되는것 외에도 더 다양하다!

1. closet()

• closet () 현재 요소 자신 그리고 자신요소 부터 상위로 탐색하여 가장 가까운 조상요소를 찾을 수 있다.
• 주어진 선택자와 일치하는 가장 가까운 조상 요소를 반환하거나, 일치하는 조상이 없으면 null을 반환한다

const handleClick = (e) => {
  const button = e.target.closest('button');
  
  if (button) {
    // 버튼 클릭에 대한 로직
  }
};

2. matches()

• matches()는 DOM 엘리먼트가 주어진 선택자와 일치하는 지 확인한다 (Boolean 값 반환)

const handleClick = (e) => {
  const button = e.target.matches('button')
  
  if (button) {
    // 버튼 클릭에 대한 로직
  }
};