Events(4)

Events(4)

버블링과 캡처링

• 4. 이벤트 전파(버블) 정지

const parentEl = document.querySelector('.parent')
const childEl = document.querySelector('.child')
const anchorEl = document.querySelector('a')

window.addEventListener('click', event => {
  console.log('Window!')
})
document.body.addEventListener('click', event => {
  console.log('Body!')
})
parentEl.addEventListener('click', event => {
  console.log('parent!')
  event.stopPropagation() // 버블링 정지!
})
childEl.addEventListener('click', event => {
  console.log('child!')
})
anchorEl.addEventListener('click', event => {
  console.log('Anchor!')
})
// Anchor! child! parent!

• 4. 이벤트 캡처

const parentEl = document.querySelector('.parent')
const childEl = document.querySelector('.child')
const anchorEl = document.querySelector('a')

window.addEventListener('click', event => {
  console.log('Window!')
})
document.body.addEventListener('click', event => {
  console.log('Body!')
}, {capture: true})
parentEl.addEventListener('click', event => {
  console.log('parent!')
})
childEl.addEventListener('click', event => {
  console.log('child!')
})
anchorEl.addEventListener('click', event => {
  console.log('Anchor!')
})
// Body! child! parent! Window!