[Javascript] Web 이벤트 전파 막는 방법과 프론트 개발자가 반드시 알아야 하는 개념.

이벤트 버블링

하위의 객체에서 이벤트가 발생했을 경우, 상위 요소까지 이벤트가 전달되는 현상을 말합니다.

구글 이미지에서 찾음.

가장 하위 요소인 class_3을 눌렀더니, 콘솔에 모든 요소의 click 이벤트가 발생한 것을 확인할 수 있습니다.

이벤트 버블링이 발생한 현상입니다. 코드는 아래와 같습니다.

 

 

Javascript에서 이벤트 버블링을 막는 방법

class_3을 누르면, class_3만 이벤트 동작을 합니다.

이벤트가 전파되지 않도록 하는 event 객체에 stopPropagation() 함수를 사용합니다.

MDN
Web API > Event > Event.stopPropagation()
이벤트 캡쳐링과 버블링에 있어 현재 이벤트 이후의 전파를 막습니다.

 <script>
        function init() {
            const div = document.querySelectorAll('div');
            div.forEach((d) =>  {
                d.addEventListener('click', (event) => {
                    event.stopPropagation();
                    console.log(event.currentTarget);
                })
            })
        }
        init();
    </script>

 

 

Vue.js에서 이벤트 버블링을 막는 방법

이 현상을 막는 방법은 다음과 같습니다. HTML 요소에서 이벤트 전파를 막는 방법입니다.

<div @click="alert('버블링 동작함.')">
  <div @click.stop=""></div>
</div>

다음 코드를 실행시키면, alert가 발생하지 않습니다.

@click 이벤트에 stop 키워드가 버블링 현상을 막아준 겁니다.

 

이런 특징을 이용해서 저는 주변 영역을 클릭해서 현재 창이 띄워져 있는 팝업을 닫게하는 기능을 만들 때 사용했습니다.

전체 배경을 누르면 띄워져 있는 sub popup을 닫게 하는 기능을 구현하였습니다.

전체 배경화면을 누르면 팝업을 무조건 닫도록 코드를 만들었습니다.

그래서, 팝업을 띄워서 팝업의 버튼을 눌렀습니다.

 

그런데, 팝업이 의도치 않게 닫혔습니다.

이렇게 버블링 현상을 막지 않는다면 sub popup에서 Click이벤트가 발생하게 되도 팝업이 닫히게 됩니다.

버블링으로 인해서 Click 이벤트가 전체 배경 요소까지 올라가서 모든 팝업을 닫히도록 동작해버리기 때문입니다.

 

이벤트 버블링을 막고 온전히 sub popup 창 내에서의 기능을 사용하려면, 이벤트 버블링을 막는 것이 필수입니다.

 

만약 HTML 요소에서가 아닌, Javascript 함수 내부에 버블링이나 캡쳐링 같은 이벤트 전파를 막으려면 event.stopPropagation()을 사용하면 됩니다.