jquery 이벤트 버블링 처리

jquery 이벤트 버블링

--> 실행되는 A이벤트를 막고 B이벤트를 사용하는거를 의미함

 

 

event.stopPropagation()으로 jquery 이벤트 버블링을 해볼거임

 

 

 

 

1. 상황분석

 

예. 초록색 검사 결과지를 누르면 '데이터 보류중' 이라는 문구가 나오게끔 event 즉 alert창을 쓰려함

 

여기에서는 data-btn으로 따로 쿼리를 설정해둔 상태임

 

 

일단 jsp 파일인 화면단에서 확인해보면 \

검사결과지부분에서 data-btn이라는게 있는걸 볼 수 있음

 

 

 

 

data-btn은 common.js파일에 쿼리를 따로 설정해둔 상태

data-btn이 눌리면 특정한 창이 뜨게끔 되어있음 

 

 

 

 

 

여기에서 jquery 이벤트 버블링을 사용해서 

저 common.js파일에 있는 data-btn이 실행되는걸 막고 이벤트B가 뜨게끔 설정해줘야하는상황

 

 

-----> 그럼 다시 .jsp화면단으로 돌아가서

 

 

 

 

 

 

 

2. event.stopPropagation()으로 jquery 이벤트 버블링 코드 작성해보기 

 

 

$(function(){

                     $('map').imageMapResize();

                    

                     // btn01이 눌렸을때 호출되는 이벤트

                     $('[data-btn=pdf4], [data-btn=pdf7]').click(function(e){

                                e.stopPropagation();

                                alert('데이터 제공 보류 중');

                     });

                    

                    

           });

여기에서 아래코드 부분은 onload부분이라서 제일먼저 로딩됨

A이벤트를 막고 먼저 로딩되야하니까 여기에 적어줘야함

$(function(){

                     $('map').imageMapResize();

                    

                    

           });

 

어떻게 적을지?

// btn01이 눌렸을때 호출되는 이벤트

                     $('[data-btn=pdf4], [data-btn=pdf7]').click(function(e){

                                e.stopPropagation();

                                alert('데이터 제공 보류 중');

                     });

 

여기는 선택자통해서 name이나 id 혹은 class 로 가져오는게 아니라

Data-btn으로 가져오면 됨

선택자로 선택 $('[data-btn=pdf4], [data-btn=pdf7]')

클릭하면 .click

다음과 같은 기능이 작동함 (function(e){    });

그 기능은 <jquery 이벤트 버블링> e.stopPropagation(); 으로 막고

다음 alert창을 띄우기 alert('데이터 제공 보류 중');