使用jQuery捕捉和冒泡 [英] Capturing and Bubbling using jQuery

问题描述

我是jQuery的新手，我试图理解捕捉和冒泡的概念。

我已经阅读了很多文章，但大多数都是描述的我们假设我们有以下HTML代码：

 < div id =outter> 
 
 outter 
 
< div id =inner> 
 
内
< / div> 
 
< / div> 
  

捕获是我们沿着DOM元素走下去的阶段，当我们爬上去时冒泡。 p>

在Javascript中，您可以决定遵循哪种方式（使用true或false参数）：

  element.addEventListener（'click'，doSomething，true） - >捕获阶段
 element.addEventListener（'click'，doSomething，false） - >泡泡阶段
  

是否有类似的jQuery来表示除JavaScript之外的其他方式？ / p>

jQuery使用默认阶段吗？比如泡泡？

因为我用下面的代码来测试这个：

css strong>

 < style> 
 
 div {
 border：1px纯绿色; 
 width：200px; 
 
} 
 
< / style> 
  

jQuery

 <脚本> 
 
 $（document）.ready（function（）{
 
'（'div'）。click（function（）{
 $（this）.animate （{'width'：'+ = 10px'}，{duration：3000}）
}）; 
 
}）; 
 
< / script> 
  

看起来，当我点击outter div时，只有该div才会生成更大的div。当我点击内部div时，div divs都会生成动画。

我不知道我是否错了，但是这个测试表明默认的浏览器传播方法是泡沫。

如果我错了，请纠正我。

解决方案

jQuery使用事件冒泡。如果要添加使用捕获模型的事件处理程序，则必须使用 addEventListener 明确执行此操作。 捕获jQuery的事件显示了如何使用jQuery选择器来执行此操作。

I am new to jQuery and I'm trying to understand the concept of capturing and bubbling.

I have read a lot of articles, but most of them described event propagation for Javascript.

Lets assume we have the following HTML code:

<div id="outter">

        outter

        <div id="inner">

                inner
        </div>

</div>

Capturing is the phase where we go down the DOM elements and bubbling is when we go up.

In Javascript you can decide which way to follow (using true or false parameters):

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

Is there anything similar for jQuery to denote which way to follow other than the JavaScript way?

Also does jQuery uses a default phase? For example bubble?

Because i used the following code to test this:

css

<style>

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

       }

</style>

jQuery

<script>

    $(document).ready(function(){

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

    });

</script>

It appears that when I click on the outter div, only that div animates to a larger div. When I click to the inner div both divs animate to larger divs.

I don't know if I am wrong, but this test it shows that the default browser propagation method is bubble.

Please correct me if i am wrong.

解决方案

jQuery uses event bubbling. If you want to add an event handler that uses the capturing model, you have to do it explicitly using addEventListener. Event capturing jQuery shows how you can do this using jQuery selectors.

这篇关于使用jQuery捕捉和冒泡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！