버블링 막기 event.stopPropagation() 이벤트

버블링 막기, event.stopPropagation()

 

 

이벤트 버블링 예시

버블링 영역

전체 영역에 click 이벤트가 있고, 겹쳐진 영역에도 click 이벤트가 있는 상황이다. 이러한 상황에서 겹쳐진 영역을 클릭하면 겹쳐진 영역에 이벤트가 발생하고 나서 전체 영역의 이벤트도 발생한다. 이러한 사항을 이벤트 버블링이라고 한다.

 

우리는 겹쳐진 영역의 이벤트만 실행하고 싶다면 event.stopPropagatioin() 이라는 함수를 사용해야 한다.

event.stopPropagatioin()는 현재 발생한 이벤트 이후의 상위 엘리먼트들의 이벤트 전파를 중단시킨다.