이벤트 위임

이벤트 위임(Event delegation)
하나의 좋은 예시는 일련의 리스트 아이템들입니다 — 만약 각각이 선택되었을 때 메시지를 띄우기(pop up)를 원한다면, 여러분은 click 이벤트 리스너를 부모 <ul>에 설정할 수 있고, 이벤트들은 리스트 아이템들에서 <ul>까지 올라갈 것입니다.

→ 이벤트 버블링/캡처링을 이용한 것으로, 여러 하위 요소마다 각각 이벤트 핸들러를 할당하지 않고, 공통되는 상위 요소에 이벤트 핸들러를 할당하여 이벤트를 관리하는 방식

• 여러 개의 이벤트 리스너를 최소화하여 효율적
• 코드 간결, 유지보수 용이
• 더 적은 이벤트 리스너 → 메모리 사용 최적화
• DOM 계층의 다양한 수준에서 이벤트 처리 가능

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>

이벤트 위임 X

const li = document.querySelectorAll("li");

li.forEach((li) => {
		li.addEventListener("click", () => {
				li.classList.add("selected");
    });
});

→ 반복문을 통해 각 li 요소마다 이벤트 리스너 추가

이벤트 위임 O

const ul = document.querySelector("ul");

ul.addEventListener("click", (event) => {
		if (event.target.tagName == "LI") {
		    event.target.classList.add("selected");
		}
});

→ 모든 li 요소의 공통 상위 요소인 ul에 이벤트 리스너 추가
⇒ li 요소 클릭 시 ul 요소로 이벤트 버블링

references
👉 https://c4u-rdav.tistory.com/85