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

Question

我有以下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> 类的事件冒泡。是因为子类并没有为它们绑定点击事件吗？我还是不太理解在什么情况下会触发事件冒泡。

- blank_kuma

---

冒泡事件从最内层子元素开始向父级元素传递。因此，如果您在内部的 li 上定义了它，则单击将首先触发内部的 li，然后再依次触发其父元素。 - Shaunak D

感谢您的快速回复。我知道点击<li>也会触发事件，但为什么我看不到从<li>开始并到达父类的一系列事件链，即两个警报，一个是子<li>，另一个是父<ul>？ - blank_kuma

请查看http://www.quirksmode.org/js/events_order.html和https://dev59.com/4W445IYBdhLWcg3w9Oss。 - Andreas

所以基本上，当事件被触发时，事件冒泡总是会发生。在我的代码中，如果我给<li>元素分配另一个点击事件，那么会触发两个警报对吧？但是我仍然不明白为什么会为<li>元素触发点击事件，即使我没有给它分配任何事件？在jQuery中没有事件捕获机制。 - blank_kuma

Answer 1

<ul> 元素包裹了 <li> 元素，这就是为什么当你点击任何一个项目时都会触发警报。对于附加了点击事件的所有DOM元素，当单击它们时，所有子元素都会触发事件（除非通过调用event.stopPropagation()停止传播事件）。

目前与事件冒泡无关。正如注释正确地指出的那样，冒泡是当事件为该元素触发，然后依次为父元素触发时发生的。

您的评论也是正确的。如果您附加了一个li的事件，您将看到两个警报，就像我在这个Fiddle中所演示的一样。

- Omri Aharon

---

非常感谢。所以，是因为继承，子元素也得到了这些方法（函数）吗？ - blank_kuma

@blank_kuma 没错 :) - Omri Aharon

非常感谢。你们所有人都为我澄清了很多疑惑 :) - blank_kuma