버블링(bubbling)과 캡쳐링(capturing)

    <div class="a">
        <div class="b">
            <div class="c"></div>
        </div>
    </div>
 
 

이러한 계층구조일 때

    document.querySelector('.a').addEventListener('click', function(){
     console.log('a');
    }, false);
 
    document.querySelector('.b').addEventListener('click', function(){
     console.log('b');
    }, false);
 
    document.querySelector('.c').addEventListener('click', function(){
     console.log('c');
    }, false);
})

이벤트의 마지막인자로 false를 받으면 버블링, true면 캡쳐링이다.

버블링(bubbling)이란

이벤트를 실행했을때 자식 -> 부모순으로 이벤트가 전달됨.

즉 가장 하위엘리먼트인 c 를 클릭했을 떄 이벤트가 발생하고 그 후

c의 부모인 b에게 이벤트가 일어나고 b의 부모인 a에게 이벤트가 발생함.

c 클릭시 이벤트 발생순서 c -> b -> a

b 클릭시 이벤트 발생순서 b -> a

a 클릭시 이벤트 발생순서 a

인자 : false

캡쳐링(Capturing)

버블링과 방향이 반대이다. 부모 -> 자식순으로 이벤트가 전달된다.

c 클릭시 이벤트 발생순서 c

b 클릭시 이벤트 발생순서 b -> c

a 클릭시 이벤트 발생순서 a -> b -> c

인자 : true

이벤트 전달의 차단

evt.stopPropagation();을 넣어주면 해당노드는 이벤트가 전파되지 않는다.