너무 당연하겠지만 문서를 구성하는 페이지 상의 DOM 요소들은 서로 중첩될 수 있다. 자식 요소가 있으면 그 위로는 부모가 되는 요소가 있게 마련이다. 그래서 어떤 경우에는 자식요소를 클릭했는데도 자식요소뿐 아니라 그 부모요소의 핸들러도 실행되는 경우가 발생할 수 있는데 그 이유가 무엇인가를 찾아보다보면 이벤트 버블링(event bubbling)이라는 개념에 맞닥뜨리게된다.


예를 들어보자. 다음의 코드를 보면 <div> 태그안에 <span> 태그가 있고 다시 그 안에 <strong> 태그가 순차적으로 중첩되어 있음을 알 수 있다.


	
the event bubbles up to more general elements.


브라우저상에는 다음과 같이 보일 것이다.

 

the event bubbles up to more general elements.


여기서 만일 <span> 태그의 'bubbles up' 부분을 클릭하게 되면 예상한대로 미리 정의한 클릭 이벤트 핸들러에 의해 '2'가 출력되겠지만 상위 태그인 <div>에 걸린 핸들러도 실행되어 '1'도 출력되는 것을 볼 수 있다. 그 이유가 바로 이벤트 버블링 때문이다. 

 


이벤트 버블링(Bubbling)


이벤트 버블링은 이벤트가 발생하는 요소로부터 시작하여 이 요소의 상위 요소로 올라가면서 이벤트를 검사하고 정의된 이벤트 핸들러가 있다면 그 핸들러를 실행하는 이벤트 처리 개념이다. (반대 개념으로는 캡처링이 있다) 


이해를 위해 다음의 예제를 보자. 



	
	


	
A
B
C

 

위의 예제에서는 모두 3개의 중첩된 <div> 태그가 존재한다. 여기서 가장 안쪽 즉, 구조상 가장 하위에 있는 요소(classC 클래스를 가진 div)를 클릭할 경우 이 요소의 onclick 이벤트 핸들러에 의해 'C'가 먼저 출력되고 그 다음으로는 그 상위요소인 classB 클래스를 가진 div 요소의 핸들러가, 그리고 마지막으로는 classA 클래스를 가진 div 요소의 핸들러가 순차적으로 실행된다. 이와 같이 이벤트 버블링은 가장 안쪽 요소 또는 하위 요소로부터 가장 바깥쪽 요소 또는 상위 요소로 이벤트를 처리해 나가는 개념이다. 


그러나 위의 예제와 같은 상황은 일반적으로 우리가 기대하는 상황은 아니다. 일반적으로는 각  div 요소를 클릭할 때 해당 div 요소의 핸들러만 실행할 것으로 기대할 것이다. 그래서 이렇게 이벤트가 상위 요소에 의해 다시 처리되지 않도록 할 필요가 있는데 이때 이러한 버블링을 인위적으로 막기 위해 event.stopPropagation() 메소드를 사용한다. 



event.stopPropagation()


앞서의 예제로 다시 돌아가보자. 이 예제에서는 3개의 핸들러 중 두번째 요소의 핸들러를 실행할 때 event.stopPropagation() 메소드를 호출한다. 그럼으로써 두번째 요소에 의해 처리된 이벤트가 classA 클래스를 가진 그 상위요소에 의해 처리되지 않도록 한다. 



	
    


	
A
B
C

이러한 이벤트 버블링과 반대의 개념이 이벤트 캡처링인데 jQuery에서는 기본적으로 버블링 방식의 이벤트 처리를 지원하기 때문에  캡처링 개념에 대해서는 특별히 실제 쓸 일이 그리 없을 것이다. 


이벤트 버블링 및 캡처링에 대해 잘 이해할 수 있는 몇가지 웹페이지를 링크해본다. 


1. Bubbling and capturing

2. 이벤트 버블링(Event Bubbling) 및 이벤트 캡처링(Event Capturing)



Posted by 라스모르
,