如果 bubbles 属性为 true，表示事件会冒泡，即从触发事件的目标元素开始，沿着DOM树向上传播。如果 bubbles 属性为 false，表示事件不会冒泡，即事件只会在触发事件的目标元素上被处理，不会向上传播到更高层次的元素。
以下是一个简单的例子，演示了事件冒泡的概念：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件冒泡示例</title>
</head>
<body>
<div id="outer" style="border: 2px solid red; padding: 10px;">
<p id="inner" style="border: 2px solid blue; padding: 10px;">点击这里</p>
</div>
<script>
// 获取页面上的两个元素
var outer = document.getElementById("outer");
var inner = document.getElementById("inner");
// 添加点击事件处理程序
outer.addEventListener("click", function(event) {
// 使用 event.bubbles 判断事件是否冒泡
var doesBubble = event.bubbles;
// 更新页面，显示事件是否冒泡
alert("事件是否冒泡: " + doesBubble);
});
inner.addEventListener("click", function(event) {
// 在内部元素上的点击事件
// 事件冒泡将触发外部元素的点击事件处理程序
});
</script>
</body>
</html>
在这个例子中，当点击页面上的 <p> 元素时，会触发内部元素上的点击事件处理程序。由于事件冒泡，外部元素上的点击事件处理程序也会被触发，弹出一个提示框，显示事件是否冒泡。
转载请注明出处：http://www.zyzy.cn/article/detail/4455/HTML