2014-07-05 5 views
16

저는 jQuery를 처음 사용하고 있으며 캡쳐 및 버블 링의 개념을 이해하려고합니다.jQuery를 사용하여 캡처 및 버블링

많은 기사를 읽었지만 대부분은 Javascript에 대한 이벤트 전파를 설명했습니다.

<div id="outter"> 

     outter 

     <div id="inner"> 

       inner 
     </div> 

</div> 

캡처 우리는 DOM 요소를 내려 가서 우리가 갈 때 기포가있는 단계입니다 :

우리는 다음과 같은 HTML 코드가 있다고 가정 할 수 있습니다.

당신이 (true 또는 false 매개 변수를 사용)에 따라 어떤 방법을 결정할 수 있습니다 자바 스크립트에서

: 아무것도 JQuery와 자바 스크립트 방식 이외 따라 어떤 방식으로 표시하기 위해 비슷한

element.addEventListener('click',doSomething,true) --> capture phase 
element.addEventListener('click',doSomething,false) --> bubble phase 

있습니까?

또한 jQuery는 기본 단계를 사용합니까? 예를 들어 거품? 그것은 그 나는 outter는 div의를 클릭하면에만 나타납니다 jQuery를

<script> 

    $(document).ready(function(){ 

     $('div').click(function(){ 
      $(this).animate({'width':'+=10px'},{duration: 3000}) 
     }); 

    }); 

</script> 

CSS

<style> 

    div { 
      border: 1px solid green; 
      width: 200px; 

     } 

</style> 

:

내가이를 테스트하려면 다음 코드를 사용하기 때문에 그 div는 더 큰 div로 움직입니다. 내 div를 클릭하면 두 div가 큰 div로 움직입니다.

내가 잘못했는지 모르겠지만이 테스트에서는 기본 브라우저 전파 방법이 거품임을 보여줍니다.

내가 잘못하면 저를 교정하십시오.

+0

http://api.jquery.com/event.stoppropagation/ – Satpal

+0

예 기본적으로 최대 이벤트 풍선은 DOM –

+0

http://stackoverflow.com/questions/7398290/unable-to-understand의 DOM에 위배됩니다. -usecapture-attribute-in-addeventlistener – adeneo

답변

36

jQuery는 이벤트 버블 링을 사용합니다. 캡쳐 모델을 사용하는 이벤트 처리기를 추가하려면 명시 적으로 addEventListener을 사용해야합니다. Event capturing jQuery은 jQuery 선택기를 사용하여이 작업을 수행하는 방법을 보여줍니다.

+0

감사합니다 바머, 당신의 대답은 나를 위해 물건을 지 웁니다! – christostsang

+0

제공된 링크가 잘못되었습니다. 버블 링 단계가 시작된 후에도 이벤트가 계속 연결됩니다. – Offenso