使用jQuery捕获和冒泡

Question

我是jQuery的新手,我正在尝试理解捕获和冒泡的概念.

我已经阅读了很多文章,但大多数都描述了Javascript的事件传播.

让我们假设我们有以下HTML代码:

<div id="outter">

        outter

        <div id="inner">

                inner
        </div>

</div>

捕获是我们沿着DOM元素走下去的阶段,冒泡就是我们上升的时候.

在Javascript中,您可以决定使用哪种方式(使用true或false参数):

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

有没有类似的jQuery来表示除JavaScript方式之外的哪种方式？

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

因为我使用以下代码来测试这个:

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>

看来,当我点击outter div时,只有那个div动画到更大的div.当我点击内部div时,两个div都会生成更大的div.

我不知道我是不是错了,但是这个测试表明默认的浏览器传播方法是冒泡的.

如果我错了,请纠正我.

Answer 1

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

Answer 2

事件冒泡将从最里面的元素开始执行到最外面的元素。

事件捕获将从外层元素开始执行到最内层元素。

但是 jQuery 会使用事件冒泡。我们可以通过以下方式实现事件捕获：

$("body")[0].addEventListener('click', callback, true);

addEventListener 中的第三个参数将告诉浏览器是否进行事件冒泡或事件捕获。

默认情况下它是假的。

如果它是假的，那么它将需要事件冒泡。如果为真，则将进行事件捕获。

Answer 3

问题和答案存在以下误解：浏览器要么捕获，要么冒泡。

\n\n

事实是：浏览器总是在每次点击时按顺序执行捕获和冒泡。

\n\n

\n

除了 JavaScript 方式之外，jQuery 是否有类似的东西来表示遵循哪种方式？\n jQuery 也使用默认阶段吗？比如泡沫？

\n

\n\n

jQuery 没有事件阶段。DOM 有。DOM 总是两者兼而有之。\n但是 jQuery 仅将处理程序注册到冒泡阶段。没有 jQuery 方法可以注册到捕获阶段，因此气泡注册不是默认的，而是唯一的方法（使用 jQuery）。

\n\n

\n

我不\xe2\x80\x99不知道我是否错了，但是这个测试表明默认的浏览器传播方式是bubble。

\n

\n\n

如果我\xe2\x80\x99m 允许的话，你错了。当您单击外部 div 时，就会发生捕获，直到到达外部 div，然后冒泡...它只是不会比事件的实际目标更深。

\n\n

如果单击内部 div，capture 会传递外部 div，但该阶段没有注册任何处理程序，然后它到达目标，并在返回（气泡）的过程中触发外部 div 处理程序。\xe2\x80\ x94我还没有\xe2\x80\x99t运行你的代码，但是很难判断哪个先发生（内部是第一个）。

\n\n

（注意：一旦达到目标，该阶段实际上称为 \xe2\x80\x9ctargetphase\xe2\x80\x9d，并且处理程序的调用与它们注册的阶段无关（按注册顺序，顺便说一句）。）

\n