jquery - 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> 的事件冒泡类(class)。 这是因为子类没有点击事件吗？ 我还是不明白什么时候会触发事件冒泡？

Answer 1

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

目前，它与事件冒泡无关。由于注释正确，冒泡是指元素触发事件，然后按顺序触发父元素的事件。

你的评论也是正确的。如果您附加了 li 的事件，您将看到两个警报，如 Fiddle 中所示。我做的。