JavaScript 이벤트 위임

이벤트를 특정한 대상에다가 직접 부여하는 것이 아닌, 그 대상의 조상요소에 위임을 해서 이벤트를 한 번에 제어할 수 있습니다. 비슷한 패턴의 여러 요소가 있을 때 사용합니다.

아래의 코드는 child 클래스에 해당되는 모든 요소를 nodeList에 받아와 각각의 addEventListener를 추가한 것입니다. 이벤트 리스너가 요소의 개수만큼 실행됩니다.

const parentEl = document.querySelector('.parent');
const childEls = document.querySelectorAll('.child');

childEls.forEach(el => {
  el.addEventListener('click', event => {
    console.log('모든 대상 요소에 이벤트를 등록합니다');
  })
})

이벤트 위임이라는 개념을 이용하면 이벤트를 딱 한 번만 등록하여 사용할 수 있습니다.

const parentEl = document.querySelector('.parent');

parentEl.addEventListener('click', event =>{
  const childEl = event.target.closest('child');
  if(childEl){
    console.log('조상 요소에 한 번만 이벤트를 등록합니다.')
  }
})

closest()는 대상 요소의 선택자와 일치하는 가장 가까운 조상 요소를 찾습니다. 대상 요소를 포함한 가장 가까운 요소를 찾는 것이므로, child를 클릭한 것과 동일합니다.

요소를 찾지 못하면 항상 null 데이터가 반환되므로 , 찾은 요소가 없다만 실행 되지 않습니다.