자바스크립트를 사용하여 이벤트를 구현할 때 발생가능한 문제점 중 하나로 이벤트 버블링 현상을 빼놓을 수 없을 것이다. 아래는 이벤트 버블링(Event Bubbling)이 무엇이고 왜 이런 문제가 발생하는지 알아볼 것이며 이를 해결하기 위한 방법에 대하여 예제를 통해 자세히 알아보고자 한다. 먼저 이벤트 버블링이 무엇인지 알아보자.
이벤트 버블링이란이벤트 버블링은 보통 선택한 엘리먼트가 속해있는 부모요소에 의하여 발생한다. 예를들어 어떤 버튼을 클릭하려고 할때 그 버튼을 가지고 있는 부모 요소에 이미 클릭 이벤트가 존재하는 경우를 말할 수 있다. 이 경우 선택한 요소와 더불어 의도하지 않았던 부모 요소의 이벤트도 함께 실행되는 문제점을 발생시킬 수 있을 것이다. 그렇다면 이를 해결하기 위한 방법으로 어떤 방법이 있을까?

그림) html 코드는 이처럼 계층형 구조를 가지므로 부모요소 간섭의 이벤트 버블링이 발생 가능함

우선 이벤트가 발생할 경우 동시에 실행된 이벤트 중에서 자식 요소를 우선으로 하는 방법이 있을 것이다. 이렇게 코드를 작성하된 무조건 자식요소가 실행되고 부모요소는 실행을 중단하도록 코드 작성을 할 수 있다. 하지만 중복되면서 동시에 발생한 이벤트 확인하고 특정 이벤트를 중단하기 위해서는 많은 노력이 필요할 것이다. 이런 경우에 발생하는 이벤트 버블링을 제거하기 위한 방법으로 자바스크립트가 제공하는 이벤트 관련 함수 stopPropagation()을 사용할 수 있다.

propagation은 사전적의미로 번식이란 의미를 가지며 부모로 부터 생산된 어떤 것을 의미한다. stopPropagation() 함수를 사용하면 부모에 의한 이벤트 버블링을 효과적으로 매우 간단하게 막을 수 있게된다. 그럼 아래의 예제를 보자.


! stopPropagation() 함수 예제보기

<style type="text/css"> .dep1 {
   width: 200px;
   height: 200px;
   display: block;
   background-color: #dcdcdc;
}
.dep2 {
   width: 100px;
   height: 100px;
   display: block;
   margin: 3px auto;
   background-color: #ececec;
}
button {
   display: block;
   margin: 0 auto;
}
</style>

<div class="dep1" onclick="doDep1(event);">
   dep1
   <div class="dep2" onclick="doDep2(event);">
      dep2<br /><br />
      <button onclick="doDep3(event);">dep3</button>
   </div>
</div> 

여기까지는 html 그리고 css 코드이다. 위 코드를 실행하면 각각의 상위 요소와 하위 요소 세가지가 존재한다. 모든 요소들은 클릭 이벤트를 가지고 있으며 가장 하위의 요소를 클릭할 경우 해당 함수를 사용하여 부모의 요소들이 가진 이벤트가 실행되지 않도록 하려한다. 이를 구현하기 위하여 아래의 스크립트를 작성할 수 있다하겠다.

<script type="text/javascript">
var doDep1 = function(event) {
   alert('Clicked dep1');
}
var doDep2 = function(event) {
   alert('Clicked dep2');
}
var doDep3 = function(event) {
   event.stopPropagation();
   alert('Clicked dep3');
}
</script>

위 스크립트는 각각의 요소들이 클릭시 현재 요소가 클릭되었음을 브라우저의 경고창(alert)에 출력하는 소스이다. 여기서 dep3의 클래스를 가진 요소는 event.stopPropagation() 코드를 추가하여 실행하였다. 그렇기 때문에 dep3 요소를 클릭하면 부모 요소들의 함수는 실행되지 않고 오직 doDep3 함수만 실행되게 된다. 실제로 클릭하면 동일한 효과가 나타난다. 그렇다면 만약 다른 요소 dep2를 클릭하면 어떻게 될까? dep2의 부모요소인 dep1 요소를 클릭했을 때 발생하는 doDep1() 함수가 함께 실행되어 콘솔에 출력될 것이라 예상할 수 있다. 이는 아래에서 직접 클릭해보기 바란다.




dep1



dep2













이벤트 버블링은 개발자 실수로 인해 발생가능한 매우 흔한 이벤트 오류이다. 이런 오류가 발생하지 않도록 반드시 해당 이벤트 함수를 꼭 인지하고 사용해야 할 것이다.