1) 타겟 요소의 가장 최상위 window 객체로부터 캡처링 단계의 이벤트 리스너가 등록이 되어 있는지 확인하고, 있다면 실행한다.
2) 그리고 계속 자식 요소로 전파되며 만나는 캡처링 이벤트 리스너를 실행하고 결국 타겟요소까지 이동
window // 캡처링 이벤트가 있다면 실행!
↓
html, body ... // 캡처링 이벤트가 있다면 실행!
↓
Target (button) // 캡처링 이벤트가 있다면 실행!
window // 버블링 이벤트가 있다면 실행!
↑
html, body ... // 버블링 이벤트가 있다면 실행!
↑
Target (button) // 버블링 이벤트가 있다면 실행!
// documentElement : html 요소
<script>
/*캡쳐링 단계*/
window.addEventListener('click', () => {
console.log(1);
}, true) // useCapture boolean 값
document.addEventListener('click', () => {
console.log(2);
}, true)
document.documentElement.addEventListener('click', () => {
console.log(3);
}, true)
document.body.addEventListener('click', () => {
console.log(4);
}, true)
document.querySelector("button").addEventListener('click', () => {
console.log(5);
}, true)
/*버블링 단계*/
document.querySelector("button").addEventListener('click', () => {
console.log(6);
})
document.body.addEventListener('click', () => {
console.log(7);
})
document.documentElement.addEventListener('click', () => {
console.log(8);
})
document.addEventListener('click', () => {
console.log(9);
})
window.addEventListener('click', () => {
console.log(10);
})
</script>