[JS][프로젝트] 🎬영화 검색 UI(4) - 이벤트 위임

이벤트 위임

• 자식 요소의 이벤트를 부모 요소에서 처리할 수 있도록 위임하는 것
• 이벤트 위임을 잘 다루기 위해선 event.target과 event.currentTarget의 차이를 알아야 함

  event.target : 이벤트가 발생한 요소
  event.currentTarget : 이벤트 핸들러가 등록되어 있는 요소

 

// 카드 클릭 시 카드 이미지 alert
const alertId = ({ target }) => {
  if (target === cardSection) return null;
  if (target.matches(".card")) alert(`영화 id: ${target.id}`);
  else alert(`영화 id: ${target.parentNode.id}`);
};

// card click event handler
cardSection.addEventListener("click", alertId);

➡️ 카드 클릭 시 해당 카드의 영화의 id를 alert하는 함수를 만들기 위해 이벤트 위임을 사용했다. 여기서 event.currentTarget은 cardSection이다.

이벤트 버블링🫧

• 이벤트 위임은 이벤트 버블링 때문에 가능
• 하위 요소에서 발생한 이벤트가 상위 요소로 전파되는 현상
• 이벤트 발생 시 이벤트 전파 흐름
  

출처 : 자바스크립트딥다이브