이벤트 버블링과 캡쳐링

이벤트 버블링

어떤 요소를 클릭할 때 클릭이벤트는 해당요소만 이벤트를 받을 것으로 기대한다.
그러나 실제로는 그 요소를 포함하는 부모요소에게도 이벤트가 전달된다.
이것을 마치 거품이 커지는 것에 비유하여 이벤트 버블링(event bubbling)이라고 부른다.
홈페이지에서는 태그가 독립적으로 존재하지 않고 다른 요소를 포함하거나 또는 포함되는 것이 일반적이다.
간단한 예를 들면 다음과 같다.

<div id='parent'>
    <p id="child">jQuery</p>
</div>

이 경우 자식요소인 <div>를 클릭하면 부모요소인 <p>에게도 클릭이벤트가 전달된다. 이를 확인하려면 다음과 같이 두 요소에 대하여 이벤트를 설정하면 된다.

$("#child").click(function(event){           
    alert("child");      
});

$("#parent").click(function(event){             
    alert('parent');     
});

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

1. 부모요소의 이벤트 핸들러에서 this와 event.target을 이용한다.
2. 자식요소에서 부모요소로 이벤트 전달을 차단한다.

첫 번째 방법을 이용하는 코드는 다음과 같다.

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

위의 코드에서 this는 <div id='parent'>이며 event.target은 실제로 마우스가 클릭한 요소를 의미한다.
따라서 자식요소를 클릭한 경우 event.target은 <p id='child'>jQuery</p>를 의미하므로 서로 다른 DOM객체이다.
이 경우 부모요소의 이벤트 핸들러는 실행되지 않고 자식요소의 클릭이벤트를 처리하게 된다.
두 번째 방법은 자식요소가 클릭이벤트를 받을 때 부모요소로 이벤트 전달을 강제적으로 차단하기 위해 다음과 같이 event.stopPropagation()함수를 사용한다.

$("#child").click(function(event){           
    alert("child");  
    event.stopPropagation();   
});

두 방법을 정리한 코드는 다음과 같다.

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

$("#child").click(function(event){           
    alert("child");      
});

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

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

$("#child").click(function(event){           
    alert("child");  
    event.stopPropagation();       
});

$("#parent").click(function(event){             
    alert('parent');
});

이벤트 캡쳐링

이벤트 캡쳐링(event capturing)은 버블링과 반대로 부모요소를 클릭했을 때 자식요소에 이벤트가 전달되는 메커니즘을 말한다.
jQuery는 이벤트 버블링을 사용하는 방식으로 설계되었으므로 캡쳐링에 대해서 고려할 필요는 없다.
jQuery에서 이벤트를 다룰 때 버블링을 어떻게 처리하는지 미리 체크해야 하며 jQuery공식홈페이지에서 변경되는 부분을 필요한 경우 참조해야 할 것이다.

$(event.target).is(selector)

이 함수는 이벤트를 받은 요소를 확인하기 위해 사용한다. 이 함수는 부모요소의 핸들러에서 사용하면 된다.

$("#child").click( function(event){           
    alert("child");      
});

$("#parent").click( function(event){             
    if($(event.target).is("#parent")){
        alert('parent');
    }  
});