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

Question

我有以下 HTML 代码：

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

我尝试使用 jQuery:

为 child class <li> 进行事件冒泡

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

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

Answer 1

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

目前与事件冒泡无关。如评论所述正确，冒泡是当事件触发元素时，然后依次触发父元素。

你的评论也对。如果您为 li 附加了一个事件，您将看到两个警报，正如您在我制作的 Fiddle 中看到的那样。

how jQuery event bubbling works?