[Javascript] 이벤트 버블링(bubbling) 공부해보자🛁, 그리고 버블링 멈춰!보자(.stopPropagation())

버블버블 버블팝

버블링.. 매번 공부하고 의미는 대충 알고 있는데 확실히 정리해두고 싶다. (매번 까먹음;;🤦‍♀️)

 

 

 

일단 버블링을 글로 설명하자면, 본인의 자식요소까지 부모요소의 이벤트가 전파되는 것이다.

즉, 자식의 이벤트를 실행시켰는데 부모의 이벤트도 함께 실행되어 버리는 상황이다.

작동되는 상황을 보자면 아래와 같다.

See the Pen 이벤트 버블링(bubbling) by hoyashu (@hoyashu) on CodePen.

div3을 누르면 div3의 이벤트만 실행되었으면 하는데,  div1, div2의 이벤트가 모두 발생한다.

(= 자식의 이벤트뿐만 아니라 부모의 이벤트까지 실행되는 상황)

이러한 상황을 이벤트 버블링(bubbling)이라고 하는 것이다.

 

 

이러한 버블링을 막고, 자식을 클릭하면 자식요소의 이벤트만 실행되게 하고싶을 때 사용한 것이 .stopPropagation()이다.

 .stopPropagation() - 자식요소에서 부모요소의 이벤트 발생을 막아준다.

See the Pen by hoyashu (@hoyashu) on CodePen.

div3을 누르면 div3의 이벤트만 실행되고, div2를 누르면 div2의 이벤트만 실행된다.

(= 자식의 이벤트만 실행된다)