[JS] 이벤트 : 버블링 캡쳐링, 이벤트 위임

버블링

버블링 : 이벤트 전파

window.addEventListener('click', 함수)
body.addEventListener('click', 함수)
부모요소.addEventListener('click', 함수)
자식요소.addEventListener('click', 함수)

자식 요소를 클릭하면 자식 -> 부모-> 바디-> 윈도우 순으로 넷다 실행됨

버블링 방지 event.stopPropagation()

const 함수 = () => {console.log('abc')}

const stopBubble = () => {
  console.log('abc')
  event.stopPropagation()
} 

// 자식 요소 클릭 시
window.addEventListener('click', 함수)      // 실행 안됨
body.addEventListener('click', 함수)        // 실행 안됨
부모.addEventListener('click', 함수)         // 실행 안됨
자식.addEventListener('click', stopBubble)  // abc 실행됨

캡쳐링

캡쳐 옵션이 있는 요소부터 핸들러가 실행됨

window.addEventListener('click', 함수)
body.addEventListener('click', 함수, { capture : true })
부모요소.addEventListener('click', 함수)
자식요소.addEventListener('click', 함수)

자식 요소 클릭 시, 바디의 핸들러(함수)가 가장 먼저 실행됨
바디 -> 자식 -> 부모 -> 윈도우

window.addEventListener('click', 함수)
body.addEventListener('click', 함수, { capture : true })
부모.addEventListener('click', 함수, { capture : true })
자식.addEventListener('click', 함수)

자식 요소 클릭 시
바디 -> 부모 -> 자식 -> 윈도우

window.addEventListener('click', 함수, { capture : true })  // 1
body.addEventListener('click', stop, { capture : true })  // 2 
부모.addEventListener('click', 함수, { capture : true })
자식.addEventListener('click', 함수)

자식 요소 클릭 시
윈도우 -> 바디

이벤트 위임 (Delegation)

조상 요소에 이벤트를 위임할 수 있음

모든 자식 요소에 같은 이벤트를 위임하고 싶을 때, 조상 요소에 이벤트를 위임

1. 일일이 등록하기

querySelectorAll('.child').forEach(el => {
  el.addEventListener('click', 함수)
})

2. 조상 요소에 위임

부모.addEventListener('click', event => {
  const child = event.target.closest('.child')
  
  if (child) {
    // 자식이 있으면, 실행내용을 실행하기 
  }
})

※ 참고 : 이벤트 위임을 하는 이유
https://ui.toast.com/weekly-pick/ko_20160826