jQuery 事件冒泡是如何工作的？答案

【问题标题】：how jQuery event bubbling works?jQuery 事件冒泡是如何工作的？
【发布时间】：2015-04-11 14:52:26
【问题描述】：

我有以下 HTML 代码：

<ul id="level1">
     <li id="level21">item1</li>
     <li id="level22">item2</li>
</ul>

我尝试使用 jQuery 为子类 <li> 进行事件冒泡：

$(document).ready(function(){
    $('#level1').on('click', function(event){
         alert($(this) + ',' + event);
    });
});

此代码不会触发 <li> 类的事件冒泡。这是因为子类没有点击事件吗？我还是不明白什么时候会触发事件冒泡？

【问题讨论】：

冒泡从最里面的孩子到父母发生。所以如果你在内部li上定义它；单击将首先触发内部li，然后触发后续父级。
感谢您的快速发帖。我知道点击<li> 也会触发事件，但为什么我看不到从 li 开始并转到父类的事件链，即。两个警报，一个给孩子<li>，一个给父母<ul>?
看看quirksmode.org/js/events_order.html和stackoverflow.com/questions/4616694/…
所以基本上事件冒泡总是在触发事件时发生。在我的代码中，如果我要在 <li> 元素上分配另一个点击事件，那会触发两个警报，对吧？但我仍然不明白为什么即使我没有分配一个<li> 元素也会触发点击事件？ jQuery 中没有事件捕获。

【解决方案1】：

<ul> 元素包裹了<li> 元素，这就是当您单击其中任何一个项目时触发警报的原因。对于您附加点击事件的每个 DOM 元素也会发生同样的情况 - 所有子元素都会在点击时触发该事件（除非您通过调用 event.stopPropagation() 来停止传播）。

目前，它与事件冒泡无关。正如 cmets 正确声明的那样，冒泡是事件触发元素时，然后依次触发父元素。

您的评论也是正确的。如果您为 li 附加了一个事件，您将看到两个警报，正如您在我创建的 Fiddle 中看到的那样。

【讨论】：