[Web API] stopPropagation으로 이벤트 버블링을 방지해보자!

1. 이벤트 버블링?

 

이벤트 버블링(참조)이란 무엇일까,
이벤트 효과가 전파되는 과정 중
하위 요소에서 상위 요소의 순으로 전파되는 과정을 말한다

Event | PoiemaWeb

 

같은 이벤트 타입 리스너가 상위요소와 하위요소에 모두 존재할 경우,
하위 요소에서 해당 이벤트를 발생시키게 되면
상위 요소에서도 해당 타입의 이벤트가 동일하게 발생하게 된다

이러한 동작이 일어난다는 것을 꼭 알아 두어야 할 필요가 있다

---

2. 버블링 방지가 필요한 경우

 

같은 타입의 이벤트 핸들러가 있을 때,
상위 요소와 하위 요소에서 원하는 동작이나 결과값이 다르다면
둘 중 하나를 제어해야 하는 상황이 생길 수 있다

 

필자의 경우,
테이블에 데이터를 포함하여 데이터를 열람하는 버튼이 있었는데
테이블의 row 부분 전체를 감싸는 onClick이벤트와
버튼에 해당하는 onClick 이벤트의 기능이 각각 다르게 동작해야 했다
(row 클릭시 해당 data를 선택 -> 삭제 기능을 위한 선택기능
button클릭시 해당 data의 상세보기 모달을 열람 -> data 상세보기 및 수정 등을 위한 기능)

 

상위 요소에 할당된 onClick Event

하위 요소인 버튼에 할당된 onClick Event

하지만 하위요소로 위치한 버튼을 클릭했을 때도
상위에 감싸고 있는 onClick 이벤트가 동일하게 발생이 되어
불필요한 동작이 일어나는 것을 확인하게 되었다.

 

이러한 경우, 하위요소에서 상위요소로 같은 이벤트 타입이 동작하지 않도록
stopPropagation이라는 기능을 활용하여 버블링 방지를 해줄 수 있다!

---

3. stopPropagation 에 대해 알아보자

 

일단 먼저 공식문서에 준하는 mdn을 살펴보도록 하자!

Event.stopPropagation() - Web API | MDN

문서에서 말하고 있는 그대로,
해당 함수는 그저 이벤트 전파를 막아주는 역할을 할 뿐이다.

 

다른 기능인 preventDefault처럼 이벤트 동작을 막아주는 것은 아니다
(보통 submit과 같은 기능에 preventDefault로 새로고침을 막아주는데,
그런 곳에 stopPropagation을 쓴다면 아마 새로고침은 그대로 되지 않을까
실험해 보아야 할 것 같다.)

 

또한 해당요소에 중첩되어있는 이벤트 요소들이 있는데
선택적으로 이벤트를 동작하도록 하고 싶다면
stopImmediatePropagation이라는 함수를 활용하여
해당 순서에 맞게 같은 요소 내에서도 전파를 막아줄 수 있다