[javascript] 자바스크립트 이벤트 버블링(Bubbling)과 jQuery를 이용한 예제.

이벤트 버블링 이란

이벤트가 발생한 엘리먼트에 핸들러가 할당되었는지 확인하고 할당되었다면 핸들러를 호출한다.

그 이후 해당 엘리먼트의 부모부터 시작하여 DOM 트리의 루트까지 하나하나 올라가며 동일한 이벤트 타입의 핸들러가 할당되어 있는지 확인하고, 할당되어 있다면 이를 실행한다.

이 이벤트 핸들링이 마치 샴페일 플루투의 거품처럼 위로 퍼진다 하여 이벤트 버블링(Bubbling)이라 한다.

이 이벤트 버블링을 명확하게 이해하는데엔 DOM 레벨 2의 이벤트 흐름을 살펴보는 것이 도움이 된다.

그 흐름을 그려보면 다음과 같다.

<출처 : 자바스크립트 객체지향 프로그래밍>

위 그림에서 <td>(회색상자)에서 이벤트가 발생하면 그 이벤트는 우선 브라우저의 Document 객체로 전달되어 이벤트가 발생된 <td>객체로 전달된다. 이때 <td> 부모 객체까지 전달되는 것을 캡처링(capturing)이라고 한다.

이벤트를 발생시킨 DOM 객체 타겟 객체라 하며, 타겟 객체에 이벤트를 발생시킨 이후 이벤트가 타겟 객체(현재의 <td>)의 부모로 전달되고 또 그부모의 부모객체를 이어가며 다시 최상위 Document까지 이벤트가 전달되는 것이 버블링(bubbling)이다.

캡쳐링시 이벤트 할당은 거의 사용하지 않는다고 한다. 그렇기에 여기서는 버블링 예제만을 보겠다.

*CSS 코드는 생략

*사용된 함수중 say() 함수는 jQuery in Action 에서 제공하는 소스코드중 jqia2.support.js라는 스크립트에 들어있는 함수로 console.log() 와 사실상 동일한 기능이라 생각하면 됨.

javascript 코드

      $(function(){       

$("*").click(function(e){

var current = this;

                var target = e.target;

          say('For ' + current.tagName + '#'+ current.id +  ' target is ' +

                target.tagName + '#' + target.id);

});

      });

html 코드

<div id="div1">

<div id="div2">

<img id="example" src="example.jpg">

</div>

</div>

화면

모든 엘레먼트에 클릭 이벤트가 할당되어 있는 상황이다.

이때 정 중앙의 그림을 클릭하면 어떻게 될까?

바로 다음과 같다

우선 이벤트가 발생한 타겟 객체인 이미지에서 이벤트가 처리되어 노란 박스 밑 바로 첫째줄이 쓰여진다.

그 후 부모객체인 DIV(녹색박스)로 이벤트가 버블링 되고, 동일한 클릭 이벤트가 할당되어 있기에 이벤트가 처리되어 두번째 줄이 쓰여진다.

이후에도 똑같이 하나씩 버블링 되며 동일한 이벤트면 이벤트를 처리한다.(순서대로 노란박스, BODY, HTML)

이벤트 버블링을 잘 이용한다면 동일한 코드의 반복을 피할 수 있다.

하지만 이벤트 버블링으로 인하여 엉뚱한 곳에서 이벤트가 발생할 수도 있는데 jQuery에서는 이를 방지하는 메소드를 제공한다.

위 자바스크립트 코드를 다음과 같이 고쳐보자

 $(function(){       

$("*").click(function(e){

e.stopPropagation();

var current = this;

                var target = e.target;

          say('For ' + current.tagName + '#'+ current.id +  ' target is ' +

                target.tagName + '#' + target.id);

});

      });

결과화면

e.stopPropagation() 이라는 메소드를 추가하여 이벤트 버블링을 방지 할 수 있다.

이벤트 버블링이 발생한다면 녹색 박스를 클릭 시 노란박스와 BODY, HTML 도 이벤트가 처리되어야 하나 버블링을 방지하는 메소드로 인하여 타겟객체(녹색박스)의 이벤트만 발생하고 모든 처리가 완료되었다.

참고자료

자바스크립트 객체지향 프로그래밍 - 위키북스

jQuery in Action - 인사이트