버블링 막기 event.stopPropagation()

 

버블링은 이벤트 흐름의 마지막 단계로 이벤트가 발생한 노드 부터 최상위노드 까지 흐르게 되는데

모든 이벤트가 버블링이 발생하는것이 아니기때문에 이벤트 객체의 bubbles 프로퍼티 값을 확인하면 된다.

 

bubbles 프로퍼티 값이 true면 이벤트 객체에서 제공하는 stopPropagation() 메서드를 통해 버블링을 막을 수 있다.

 

아래 링크에서 버블링 속성값을 확인 할 수 있다.

 

https://www.w3.org/TR/DOM-Level-3-Events/

UI Events

 

<script>	
    $(document).ready(function(){
        $("#btn-wrap").on("click",function(e){
            alert("버블링 테스트");
        })
        $("#btn1").on("click",function(e){
            alert("버블링실행");
        })
        $("#btn2").on("click",function(e){
            alert("버블링막기");
            e.stopPropagation();
        })
    })
</script>

<div id="btn-wrap">
    <button id="btn1">버블링실행</button>
    <button id="btn2">버블링막기</button>
</div>

 

버블링 실행을 눌러보면 btn1에 걸린 이벤트가 실행되고 버블링 단계를 거치면서 #btn1의 상위 노드인 #btn-wrap의 이벤트 리스너도 실행이 된다.

 

하지만 #btn2를 실행하면 #btn2의 이벤트 리스너 실행 후 e.stopPropagation() 메서드에 의해서 버블링이 제거되기 때문에 #btn-wrap에 걸려있는 이벤트는 실행되지 않는다.