이벤트 버블링(Event Bubbling)

이벤트 버블링(Event Bubbling)은 이벤트를 일으킨 요소의 상위요소로 이벤트가 전파되는 것을 말한다. 

그 반대는 캡처링(Capturing)이라고 한다.

다음의 소스를 보면

<script>
    function eventTest(a){
      alert(a);
    }
</script>

<div class="parent" onclick="eventTest('parent')">
    <div class="child" onclick="eventTest('child')"></div>
</div>

div.child를 클릭하게 되면, 당연히 "child"텍스트의 알림창이 띄어질 것이다.

하지만, 그 알림창을 닫게되면 바로 상위요소인 div.parent의 이벤트도 실행되어 "parent"라는 알림창이 띄어진다.

이렇게 이벤트가 상위요소로 전파되는 것이 바로 이벤트 버블링이다.

그럼 이벤트 전파를 막으려면 어떻게해야할까? 

해당함수에 event.stopPropagation();를 추가하면 되겠다.

<script>
    function eventTest(a){
      alert(a);
      event.stopPropagation(); // 이벤트 버블링 차단
    }
</script>

<div class="parent" onclick="eventTest('parent')">
    <div class="child" onclick="eventTest('child')"></div>
</div>