Event.stopImmediatePropagation()

Event.stopImmediatePropagation()
이벤트 인터페이스의 stopImmediatePropagation() 메서드는 동일한 이벤트의 다른 리스너가 호출되는 것을 방지한다.
stopImmediatePropagation 을 실행하면 해당 이벤트 핸들러를 마지막으로 그 뒤에 실행 예정이었던 이벤트 핸들러는 그 어떤 것도 실행되지 않는다.
한 가지 주의할 점은 stopImmediatePropagation 은 이벤트 캡쳐링이나 버블링과 같은 전파를 막기 위함이 아니라 캡쳐링과 버블링을 포함해 다른 모든 이벤트 핸들러의 실행을 막는다.
그래서 최상위 DOM 엘리먼트에서stopImmediatePropagation 실행 해버리면 해당 핸들러만 실행되고 그 이벤트는 핸들러의 실행이 종료됨과 동시에 같이 전파도 끝났다고 보면 된다.

stopPropagation, stopImmediatePropagtion - 비교

stopPropagation 과 stopImmediatePropagation은 동작이 서로 달라 사용할 때 주의가 필요하다.
stopPropgagation은 이벤트의 캡쳐링과 버블링의 전파만 막고 싶을 때 사용하면 좋다. 그리고 stopImmediatePropgation 은 이벤트 캡쳐링과 버블링 뿐만 아니라 현재 실행 중인 이벤트 핸들러 이후에 그 어떤 이벤트 핸들러도 실행시키고 싶지 않을 때 사용하면 유용하다.
그리고 만약 인라인 스타일로 정의된 이벤트가 있으면, stopPropagation 으로는 전파를 막을 수 없다. 대신, 인라인 스타일로 정의된 이벤트 내용이 함수 호출이 아니라 console.log('hello') 와 같은 일반 실행문의 경우는 stopPropagation으로 막을 수도 있다. 함수 호출로 인라인에 넣지 않으면 내부적으로 익명 함수로 감싸는 작업을 하는데 이런 차이 때문에 그러는 듯 싶다.
마지막으로 React나 다른 이벤트 시스템을 내부적으로 갖고 있는 JavaScript 프레임워크의 경우는 동작이 조금 다를 수 있으니 현재 사용 중인 프레임워크의 문서를 참고해서 비교해보고 사용하는 게 좋겠다.