[jQuery] jQuery에서의 이벤트 버블링과 캡처링

 

 

 

 

이벤트 버블링

우리가 원하는 것은 어떤 요소를 클릭했을 때 해당 요소에만 이벤트가 적용되는 것이지만

실제로는 그 요소를 포함하는 부모 요소에도 이벤트가 전달된다.

이를 거품이 커지는 것에 비유해 이벤트 버블링(event bubbling)이라고 한다.

 

<div id='parent'>
	<p id='child'>test</p>
</div>

 

위 코드의 경우 자식 요소인 <p>를 클릭하면 부모 요소인 <div>에게도 클릭 이벤트가 전달된다.

 

이벤트 버블링의 경우 자식 요소를 포함하지 않는 부모 요소의 영역을 클릭하면 이벤트 핸들러가 실해되지 않는다.

만약 자식 요소를 클릭했을 때 부모 요소의 이벤트 핸들러를 실행하지 않고자 한다면 두가지 방법을 사용하면 된다.

 

 

 

 

1. 부모 요소의 이벤트 핸들러에서 this와 event.target을 이용한다.

$('#parent').click(function(event) {
	if(this == event.target) {
    	console.log('parent');
    }
});

 

위 코드에서 this는 부모 요소인 <div id='parent'>인 event.target은 실제로 클릭한 요소를 의미한다.

만약 자식 요소를 클릭했을 경우 event.target은 <p id='child'>가 되므로 서로 다른 DOM 객체이다.

이때는 부모 요소의 이벤트 핸들러가 실행되지 않고, 자식 요소의 클릭 이벤트가 처리된다.

(내가 사용한 방법도 이 방법이다)

 

 

 

2. 자식 요소에서 부모 요소로 이벤트 전달을 차단한다.

$('#child').click(function(event) {
	console.log('child');
    event.stopPropagation();
});

위 코드는 event.stopPropagation() 함수를 사용한 방법이다.

이 경우 자식 요소가 클릭 이벤트를 받을 때 부모 요소로 이벤트가 전달되는 것을 강제로 차단한다.

 

 

 

 

 

 

 

이벤트 캡처링

이벤트 캡처링(event capturing)은 버블링과 반대로 부모 요소를 클릭했을 때 자식 요소에 이벤트가 전달되는 것을 말한다.

jQuery는 이벤트 버블링을 사용하는 방식으로 설계되었으므로 캡처링을 고려할 필요는 없다.

 

 

 

 

 

참고

따듯한커피 :: 이벤트 버블링과 캡쳐링 (tistory.com)