[JavaScript] event.stopPropagation 이란

event.stopPropagation을 알아보기 전에 HTML에서 사용자 이벤트 전달 과정을 이해해야 한다.

 

1. 버블업(Bubble Up)

  - 웹 페이지 내부에서는 버튼을 감싸고 있는 부모 태그들 또한 클릭 이벤트에 반응하게 되는데 이것을 버블업(Bubble Up)이라고 한다.

<ul>
    <li>
         <a href="#">테스트</a>
    </li>
</ul>

위의 코드를 예를 들면

a 태그를 클릭 했을 때 : a 태그의 onClick -> li 태그의 onClick -> ul 태그의 onClick 을 실행하게 된다.

만약 ul 태그에 onClick 이벤트가 있다면 a 태그를 클릭하는 순간 의도하지 않게 ul 태그의 onClick 이벤트가 실행된다.

 

이것을 방지하기 위해 event.stopPropagation()을 사용한다.

 

2. event.stopPropagation

  - 부모 태그로의 이벤트 전파를 중지 시킨다.