JavaScript
stopPropagation vs stopImmediatePropagation 제대로 이해하기
사내에 채팅 서비스에 관련한 크롬 익스텐션을 개발해 기존 프로덕트에 연결시키는 작업을 하고 있는 동료가 있었는데 익스텐션의 개발이 나를 포함해서 다들 처음 접하는 것이다보니 발생했던 여러 이슈들을 같이 트래킹하기가 쉽지 않았다. 그 중에서도 이번에 기억에 나서 정리된 글 까지 작성해보자하고 생각했었던 것이 자바스크립트의 stopPropagation 과 stopImmediatePropagation 인데, 평소에 알고 있었다고 생각했었던 메소드들의 동작이 정확한 팩트가 아니었다는 점에 부끄러움이 들어서 제대로 다시 공부해보자라는 생각이 들었다. 그래서 이 글은 위 두 메소드에 대한 기본적인 설명과 차이에 대해서 정리를 하는 글이다.
읽기 전에
이 글은 바닐라 자바스크립트에서 사용되는 stopPropagation , stopImmediatePropagation 에 대해서만 다루고 있다. 리액트나 뷰와 같은 자바스크립트 프레임워크의 경우는 위 메소드가 다르게 동작할 수 있다. 예를 들어 리액트의 경우는 자체적으로 구현한 이벤트 시스템이라는 것이 있는데 이는 바닐라 자바스크립트를 마찬가지로 이용했지만 Synthetic Event 라는 아키텍쳐 시스템으로 인해 실제와는 조금 다르게 돌아간다.
이벤트 버블링과 캡쳐링에 대해서 알고 있다면 이 글을 이해하기가 더 쉬울 것이라 생각한다.
element.addEventListener 에 대해서 먼저
거의 모든 자바스크립트 개발자들이 addEventListener 가 어떤 메소드인지 이미 알고 있을거라고 생각하지만 그래도 기본부터 다시 짚어간다는 생각으로 먼저 정리를 해보자.
자바스크립트를 이용해서 어떤 이벤트를 등록할 때 내부적으로는 다음과 같은 동작이 일어난다.
var event_listener_list = [];var sayHi = function() {
console.log('hi');
};
window.addEventListener('click', sayHi);--------- 위의 동작은 아래처럼 변환된다 …
