JavaScript 이벤트 - 이벤트 전파

 

 

 

 

이벤트 버블링

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

window.addEventListener('click', ()=>{
    console.log('Window')
})

document.documentElement.addEventListener('click', ()=>{
    console.log('HTML')
})

document.body.addEventListener('click', ()=>{
    console.log('Body')
})

parentEl.addEventListener('click', ()=>{
    console.log('Parent')
})

childEl.addEventListener('click', ()=>{
    console.log('Child')
})

anchorEl.addEventListener('click', ()=>{
    event.preventDefault() // a 태그 기본동작 방지
    console.log('Anchor')
})

   - 하위 노드 이벤트에서 상위 노드의 이벤트 로 전파되는 개념을 이벤트버블링 이라고 합니다.

   - 위에서는 window > documentElement > body > parent > child > anchor 의 관계를 가집니다.

실행 화면

 

 

 

 

 

이벤트 캡쳐링

window.addEventListener('click', ()=>{
    console.log('Window')
})

document.documentElement.addEventListener('click', ()=>{
    console.log('HTML')
})

document.body.addEventListener('click', ()=>{
    console.log('Body')
}.{
    capture: true
})

parentEl.addEventListener('click', ()=>{
    console.log('Parent')
})

childEl.addEventListener('click', ()=>{
    console.log('Child')
})

anchorEl.addEventListener('click', ()=>{
    event.preventDefault() // a 태그 기본동작 방지
    console.log('Anchor')
})

   - 이벤트 버블링과는 반대로 상위객체 이벤트를 우선적으로 실행하고 하위요소로 내려가는 개념입니다.

   - {capture: true} 속성을 통해 이벤트 캡쳐를 활성화할 수 있습니다.

   - 이벤트 캡쳐 실행시 window > documentElement > body > (  anchor > child > parent )의 관계로 변합니다.

실행 화면

 

 

 

 

이벤트 전파 방지 - stopPropagation

parentEl.addEventListener('click', ()=>{
    console.log('Parent')
    event.stopPropagation() // 버블링 정지
})

   - 하위 요소에서 상위 요소로의 이벤트 버블링을 정지합니다.

   - parent에 추가시 parent > child > anchor 까지만 출력되며, parent 상위 요소의 이벤트 버블링은 차단됩니다.

실행 화면