이벤트 버블링과 이벤트 캡처링

위의 그림처럼 하나의 버튼을 클릭했을 때, 

버튼 하나에만 클릭 이벤트가 일어난 것처럼 보이지만 

사실 클릭 이벤트는 버튼에만 적용된 것이 아니다. 

이벤트는 하위 혹은 상위 엘리먼트로 전파되며, 

이와 관련된 용어가 이벤트 버블링(Event Bubbling)과 이벤트 캡처링(Event Capturing)이다. 

이벤트 버블링 

이벤트가 발생하게 되면 상위 element로 이벤트가 타고 올라가는 것

이벤트 캡쳐링

이벤트 발생 시 하위 엘리먼트로 이벤트가 전파되는 것

위와 같이 A, B, C 엘리먼트가 있는데,

특정 영역을 클릭했다고 해보장

이벤트 버블링은 클릭 이벤트가 C > B > A 순으로 타고 올라가고

이벤트 캡쳐링은 클릭 이벤트가 A > B > C 순으로 타고 내려온다.

이벤트 전파를 하기 싫다! 하는 경우에는

이벤트 객체의 stopPropogation() 메소드를 호출하면 된다!

이렇게! 

$('button').addEventListener(function(event) { 

   event.stopPropogation();

});

* 참고) preventDefault() 메소드 

  element의 기본 동작은 막는 메소드