JavaScript_이벤트 버블링

이벤트 버블링

 

: 자바스크립트에서 이벤트 버블링(Event Bubbling)은 문서 객체 모델(DOM)의 이벤트 전파 방식 중 하나

• 이벤트가 발생한 요소에서 시작하여 상위 요소로 이벤트가 전파되는 메커니즘을 의미
• 하위 요소에서 이벤트가 발생하면 이벤트가 해당 요소의 부모, 그 부모의 부모, 그 부모의 부모의 부모로 계속해서 전파
• 이벤트 버블링은 이벤트가 발생한 요소에서 상위 요소로 전파되기 때문에 부모 요소에서도 같은 종류의 이벤트 핸들러를 등록하면 자식 요소의 이벤트도 감지할 수 있다.

 

이벤트 버블링을 사용하는 이유

 

1. 더 효율적인 코드 구조 

 : 이벤트 버블링을 이용하면 이벤트 핸들러를 상위 요소에 등록하여 코드를 간결하게 하는 것이 가능. 특히 동적으로 생성되는 요소에 대한 이벤트 처리가 필요한 경우에 이점이 있다

 

2. 이벤트 위임(Event Delegation)

 : 이벤트 버블링을 활용하면 동적으로 생성되는 하위 요소에 대한 이벤트를 상위 요소에서 단일핸들러로 처리가 가능하다. 이를 이벤트 위임이라고 하며, 많은 하위 요소에 대해 각각 이벤트 핸들러를 등록하는 것보다 효율적이다

 

3. 유연한 이벤트 처리

 : 이벤트 버블링을 사용하면 여러 요소에 대해 동일한 이벤트 핸들러를 등록할 수 있으므로, 코드를 보다 유연하게 유지가 가능. 새로운 하위 요소가 추가되더라도 추가적인 코드 수정 없이도 이벤트 처리가 가능하다

 

4. 캡처링과 버블링의 조절

 : 이벤트 버블링은 캡처링과 함께 사용. 이를 통해 이벤트의 흐름을 조절할 수 있다. 특정 단계에서 이벤트를 캡처링하거나 버블링할 수 있어서 더 정교한 이벤트 로직을 구현할 수 있다

 

5. 성능 향상

 : 이벤트 버블링은 이벤트 핸들러 최상위 요소에 하나만 등록하면 되기 때문에 성능면에서도 이점이 있다. 동일한 이벤트에 대해 여러 개의 핸들러를 등록하는 것보다 메모리와 성능을 더 효율적으로 사용이 가능하다

 

 

 

이벤트 버블링 예시

이벤트 버블링 예시 코드

 

 

19번째에서 27번째 줄을 보면 아래와 같은 코드 구조를 가지고 있다

(편의를 위해 코드내에 있는 클래스와 온클릭 이벤트 핸들러는 적지 않겠다 )

<div> 첫번째 박스 
    <div> 두번째 박스 
    	<div> 세번째 박스 </div>
    </div>
</div>

 

 

세번째 박스를 클릭하게 되면 아래와 같이 각 박스에 있는 이벤트가 다 발생하게 된다

 

세번째 박스를 눌렀을 때 결과값 출력

 

 

아래와 같이 코드를 바꿔주면 이벤트 버블링이 발생하지 않는다 

 

 

위 코드에 대한 브라우저 결과 출력값