[JavaScript] 이벤트 버블링(이벤트 중복 발생) 해결 방법

이벤트 버블링이란?

- HTML 요소들 간에 발생한 이벤트가 상위 요소로 순차적으로 전파되는 동작을 의미
- 이벤트가 자식 요소에서 발생하더라도 부모 요소에도 영향을 미칠 수 있다는 걸 알려줌

 

이해를 돕기 위한 예제

 

STEP 01)

    <div class="back">
        <div class="front"></div>
    </div>

 

아래와 같이 2개의 <div>를 겹쳐 놓았음

• 뒷면에 있는 검은 배경은 BACK
• 앞면에 있는 하얀 배경은 FRONT

 

STEP 02)

document.querySelector('.back').addEventListener('click', function(){
    console.log('back-click');
})

이 코드는 바깥에 있는 검은 배경을 클릭하면 콘솔을 출력하는 자바스크립트 코드가 분명함

하지만 안에 있는 하얀 배경을 클릭해도 콘솔이 찍히는 걸 알 수 있음

 

STEP 03)

- 해당 레이어를 옆면으로 본다고 가정해 보자

뒷면에 있는 검은 배경 위에 하얀 배경이 얹혀 있는 것과 같다

그래서 하얀 배경을 클릭하면 뒤에 있는 검은 배경까지 닿아서 동작하는 이런 현상을 이벤트 버블링이라고 한다 

 

겹겹이 쌓인 레이어에서 제일 윗 상단(자식 요소)을 클릭해도 맨 아래 하단(부모 요소)까지 전파되는 것을 이벤트 버블링이라고 알면 된다

(자식 요소 -> 상위 요소로 버블링 되므로 부모 요소에도 동일한 이벤트가 전달되는 것임)

 

 

이벤트 버블링 막는 법

 

e.stopPropagation() 메서드를 사용하면 이벤트 버블링을 막을 수 있습니다

• e.stopPropagation() 이 메서드는 이벤트 버블링을 중단시킵니다.
• 즉, 현재 요소에서 이벤트가 처리되고 더 이상 상위 요소로 이벤트가 전파되지 않도록 막습니다.
• 버블링이 일어나는 요소에 사용하면 됨

 

e.stopPropagation() 사용 예시

 

원하는 동작 

1. 뒷 면에 있는 배경(부모 요소)을 클릭했을 때 부모 요소를 숨긴다
2. 앞 면에 있는 배경(자식 요소)을 클릭하면 뒷 면에 있는 배경(부모 요소)이 숨겨지지 않게 한다

- 버블링을 막지 않으면 자식 요소를 클릭해도 부모 요소에 이벤트가 발생한 것처럼 됨

 

document.querySelector('.back').addEventListener('click', function(e){
    this.style.display = 'none'; // 현재 요소인 .back을 가리킴
});

document.querySelector('.front').addEventListener('click', function(e){
    e.stopPropagation();  // 버블링을 중단하여 다른 요소로의 이벤트 전파를 막음
});

 

 

이와 같이 버블링이 발생하는 곳에 사용하면 그 뒤로 전파되는 걸 막을 수 있다