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>

看来，当我点击out div时，只有那个div动画为更大的div。当我点击内部div时，两个div都会生成更大的div。

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

如果我错了，请纠正我。

Answer 1

jQuery仅使用事件冒泡。如果要添加使用捕获模型的事件处理程序，则必须使用addEventListener显式执行此操作，并在问题中显示第三个参数true。

Answer 2

事件冒泡，它将从最内层元素开始执行到最外层元素。

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

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

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

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

默认情况下为false。

如果它是假的，则会发生事件冒泡。如果是真的那么它将采取事件捕获。

Answer 3

问题和答案带有以下误解：浏览器确实捕获或冒泡。

事实是：浏览器始终会按此顺序同时捕获和冒泡。

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

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

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

如果我允许说的话，你错了。当您单击外部div时，捕获会发生，直到到达外部div，然后才会冒泡...它的深度没有超出事件的实际目标。

如果单击内部div，捕获将通过外部div，但该阶段没有在该处注册任何处理程序，然后到达目标，然后在备份（气泡）的过程中触发外部div处理程序。尚未运行您的代码，但是很难确定哪个是第一个发生的（内部是最先发生的）。

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

Answer 4

事件在用户单击的元素上冒泡时触发，并且除非我们在事件对象上调用.stopPropagation（），否则事件将一直在DOM上触发。默认是在Jquery中设置事件冒泡以便使用Capture ypu，需要在.addEventListner中将参数设置为true

使用jQuery捕获和冒泡

4 个答案: