목표
: 최근에 FE 면접 질문을 공부하던 도중에 stopImmediatePropagation 에 대해서 알게 됐다. 그리고 이에 대해 정리해보고자 글을 쓴다.
stopPropagation 이란?
: 그전에 stopPropagation에 대해서 먼저 알아보자. stopPropagation은 간단하게 설명해보면 이벤트 버블링을 막아주는 메서드이다. 예를 들어, onClick 이벤트를 갖고 있는 div 태그 안에 button 태그가 또 있는데, 그 버튼 태그에도 onClick 이벤트가 있다고 해보자. 이 때, 버튼을 클릭하게 되면 의도치 않게 부모 엘리먼트인 div 태그의 onClick 이벤트도 같이 발생하게 되는 것을 이벤트 버블링이라고 한다. 달리 말해, 하위 요소에서 이벤트가 발생하면 그 상위 요소들에게도 연쇄적으로 동일한 이벤트가 발생하는 현상이다. 그리고 이러한 이벤트 버블링을 막으려면 해당 이벤트 리스너의 콜백 함수에 event 객체의 stopPropagation 메서드를 이용해주면 이러한 현상을 막을 수 있다.
stopImmediatePropagation 이란?
: 그럼 중간에 Immediate가 추가된 stopImmediatePropagation은 뭘까?.
The stopImmediatePropagation() method of the Event interface prevents other listeners of the same event from being called.
mdn의 정의는 위와 같다. 쉽게 말해 stopImmediatePropagation을 써주면 이벤트 버블링을 막는 기능에 더하여, 즉, stopPropagation의 기능에 더하여 같은 엘리먼트에 같은 이벤트를 추가로 정의해놓은게 있을 때 그 이벤트의 동작도 막아준다. 예시를 통해 자세히 알아보면
아래 예시를 시도할 때는 아무 조작 없이 버튼을 누르고 console 창을 보시면 됩니다.
!codesandbox[elastic-browser-mzgtx4?fontsize=14&hidenavigation=1&theme=dark]
위와 같이 button을 누르면 같은 엘리먼트에 두개의 click 이벤트를 걸어서 두개의 출력문이 나온다. 하지만, 상위에 있는 이벤트 정의문에 stopImmediatePropagation을 써주면
아래 예시를 시도할 때는 2번 예시 아래의 코드의 주석을 풀어주신 다음에 테스팅 하시면 됩니다.
'
이런식으로 콘솔창에 하나의 출력문만 나오게 된다. 이 때, 주의할점은 위에서 말한 것처럼 상위에 있는 것에 stopImmediatePropagation을 써야 먹힌다는 점이다. 아래처럼 하위의 이벤트 정의문에 쓰면 똑같이 이벤트 두개가 모두 발동한다.
** 아래 예시를 시도할 때는 3번 예시 아래의 코드의 주석을 풀어주신 다음에 테스팅 하시면 됩니다.
위와 같이 stopImmediatePropagation은 하나의 엘리먼트의 똑같은 이벤트를 두개 걸었을 때 상위 이벤트 리스너에 써주면 하위에 있는 리스너의 이벤트를 무시하도록 설계돼있다(이벤트 버블링은 기본으로 막아주고). 근데 애초에.. 같은 엘리먼트의 두개의 같은 종류의 이벤트(예를 들어, 하나의 div 태그에 두개의 mousedown 이벤트 등을 거는 것과 같은)를 걸일이 있을까?... 그러면 그냥 같은 이벤트 리스너에서 처리하는게 맞다고 생각되는데 솔직하게 사용할 일이 있을지는 모르지만 알고 넘어가자.
