[Front end] Javascript Event Bubbling

 

 

Event Bubbling

---

자바스크립트에는 Event Bubbling이라는 개념이 있다. 이것은 한 자식 요소에서 이벤트가 발생했을 때 부모 요소에 이벤트를 전파하는 것을 의미하여 Event Bubbling이라고 말한다.

다음 예제 코드를 보자.

 

HTML

<div class="parent">

<button class="child"> Click me to check </button>

</div>

<input type="checkbox" id="chekbox">

 

JavaScript

$('.parent').on('click', function() {

('#checkbox').prop('checked', false);

});

$('.child').on('click', function() {

$('#checkbox').prop('checked', true);

});

.parent 클래스가 .child 클래스 버튼을 가지고 있으며 부모와 자식 요소에 같은 click 이벤트가 바인딩 되었다.

.child는 체크박스에 체크를 하고, .parent는 체크를 해제한다.

.child 요소를 클릭할 경우에 .child 에 걸린 click 이벤트가 동작하여 체크박스에 체크가 되어야 할 것이다.

하지만 실제로 버튼을 누를 경우 아무 일도 일어나지 않는다.

그 이유는 Event Bubbling 때문이다.

.child 요소를 클릭했을 때 Event Bubbling으로 인해 부모 요소로 이벤트가 전파되었고, 그 때문에 .parent 에 바인딩 된 체크 해제 이벤트가 동작하면서 체크가 되지 않은 상태가 된 것이다.

위와 같은 코드는 코드 이해를 돕기 위해 작성되어 와닿지 않을지도 모르지만 실제로 Event Bubbling을 막아야 할 일이 종종 있다.

 

e.stopPropagation();

---

기존 코드에 한 줄만 추가하면 된다.

$('.parent').on('click', function() {

$('#checkbox').prop('checked', false);

});

$('.child').on('click', function(e) {

e.stopPropagation();  /* event Bubbling 막기 */

$('#checkbox').prop('checked', true);

});