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>类的事件冒泡。 这是因为子类没有针对它们的点击事件吗？ 我还不明白何时会触发事件冒泡？

Answer 1

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

此刻，它与事件冒泡无关。当注释正确表示时，冒泡是在事件触发元素时，然后按顺序触发父元素。

您的评论也是正确的。如果您为li附加了一个活动，那么您可以看到我在Fiddle中看到的两个提醒。