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

Question

我有以下HTML代码：

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

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

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

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

Answer 1

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

就目前而言，这与事件泡沫无关。由于注释状态正确，冒泡是事件为元素触发时，然后按顺序为父元素触发。

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