[JQUERY] 이벤트 버블링 막기

이벤트 버블링 막기

클릭 이벤트 발생 시 이벤트 버블링 막기

이벤트 버블링의 경우 아래 샘플예제에서 구성을 보면 DIV안에 P안에 SPAN이 위치한 상태에서 개발자는 해당 태그만 클릭하는 경우 클릭한 태그의 클릭 이벤트가 실행되어 원하는 결과를 얻을 수 있도록 하겠지만 실제로 테스트를 해보면 SPAN 태그를 선택하는 경우SPAN - P - DIV 순으로 클릭 이벤트가 실행하기 됨으로써 원치 않는 경우가 발생하게 됩니다.

1. 샘플예제

Div Element Area

P Element Area
Span Element Area

- 결과 화면

<SPAN 영역을 클릭하는 경우>

<P 영역을 클릭하는 경우>

<DIV 영역을 클릭하는 경우>

2. 소스코드

<%----javascript start-----------------------------------------------------%>

<script type="text/javascript">

$(document).ready(function(){

/**

//ex 01)-------------------------------------

$( 'div' ).click( function(){

alert("div element click");

});

$( 'p' ).click( function(){

alert("p element click");

});

$( 'span' ).click( function(){

alert("span element click");

});

**/

//ex 02)-------------------------------------

$( "div" ).click( function(event){

var targetElement = $( event.target );

if( targetElement.is("div") ){

alert("div element click");

}

else if( targetElement.is("p") ){

alert("p element click");

}

else if( targetElement.is("span") ){

alert("span element click");

}

} );

});

</script>

<%----javascript end-----------------------------------------------------%>

<%----HTML start---------------------------------------------------------%>

<div>Div Element Area

<p>P Element Area</br>

<span>Span Element Area</span>

</p>

</div>

<%----HTML end-----------------------------------------------------------%>

3. 설명

이벤트 버블링 막기

ex 01) - 버블링 현상이 발생하는 예제

해당 예제의 DOM의 가장 상위 엘리먼트는 div 엘리먼트이고, 그 아래 p 앨라먼트 마지막에 span 엘리먼트가 존재합니다.

해당 엘리먼트 중에 이벤트가 발생하면 현재 이벤트가 발생한 핸들러부터 실행합니다.

그다음에 엘리먼트의 부모에 대한 이벤트 처리 메소드가 연결되어 있는지 확인하여 부모에 대한 이벤트를 실행하게 되면서

최상위 div 엘리먼트의 이벤트 핸들러까지 실행하게 되면서 원하지 않는 결과를 도출 할 수 있습니다.

ex 02) - 버블링 현상을 방지하는 예제

이벤트 버블링을 막은 예제로써 최상위 div 엘리먼트에 click 이벤트를 연결해서 실제로 타겟이 되는 엘리먼트를 확인하여

해당 엘리먼트의 이벤트만 실행 할 수 있습니다.