Events(6)

Events(6)

이벤트 위임

• 6. 이벤트 위임(Delegation)

비슷한 패턴의 여러 요소에서 이벤트를 핸들링해야 하는 경우,
단일 조상 요소에서 제어하는 이벤트 위임 패턴을 사용할 수 있습니다.

const parentEl = document.querySelector('.parent')
const childEls = document.querySelectorAll('.child')
//모든 대상 요소에 이벤트 등록!
childEls.forEach(el => {
  el.addEventListener('click', event => {
    console.log(event.target.textContent)
  })
})
// 1 2 3 4

조상 요소에 이벤트 위임!

const parentEl = document.querySelector('.parent')
const childEls = document.querySelectorAll('.child')
parentEl.addEventListener('click', event => {
  const childEl = event.target.closest('.child')
  if (childEl) {
    console.log(childEl.textContent)
  }
})
// 1 2 3 4