[JavaScript] 이벤트 전달 취소

먼저 부모요소 div에 자식요소인 button을 만든다. 그리고 부모요소 div를 클릭할시 div의 배경색을 검은색으로 변하게 한다. 그 결과 부모요소인 div를 클릭하면 배경색이 검은색으로 변한다. 그런데?? 자식요소인 button을 눌렀을때도 똑같이 변한다? 그 이유는 자식요소의 이벤트가 발생했을때, 그것이 부모요소에 전파되기 때문에, 자식요소를 클릭했음에도 부모요소에 설정한 대로 변하게 된다.

 

 

 

 

그럼 이번에는 자식요소를 클릭했을때, 부모요소에 이벤트가 발생하는걸 취소해보자. 자식요소 button을 클릭했을 시, stopPropagation()을 이용하여 부모요소에 이벤트 전파가 취소되게끔 하였다. 그 결과 자식요소 button을 클릭하면 부모요소의 배경색을 변하지 않고, 부모요소를 클릭했을 때만 배경색이 변화한다.

 

 

 

 

자식 요소의 또 다른 이벤트까지 취소하고 싶다면, stopImmediatePropagation()을 이용한다. 그럼 자식 요소인 button을 클릭했을 시, button 본인에게 걸려진 다른 이벤트 역시 실행되지 않는다.