在事件处理中，事件首先被触发在目标元素上，然后逐级向上冒泡到根元素。如果 bubbles 为 true，则事件会冒泡，否则不会。
以下是一个简单的示例，演示了 bubbles 的使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bubbles Example</title>
</head>
<body>
<div id="outer">
<div id="inner">Click me</div>
</div>
<script>
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
outer.addEventListener('click', function(event) {
if (event.bubbles) {
alert('Outer div clicked! Event bubbles.');
} else {
alert('Outer div clicked! Event does not bubble.');
}
});
inner.addEventListener('click', function(event) {
if (event.bubbles) {
alert('Inner div clicked! Event bubbles.');
} else {
alert('Inner div clicked! Event does not bubble.');
}
});
</script>
</body>
</html>
在这个例子中，当你点击 "Click me" 文字所在的 inner 元素时，会触发 click 事件，然后根据事件对象的 bubbles 属性，弹出不同的提示信息。在大多数情况下，事件都会冒泡，但有时我们可能想阻止事件冒泡，可以使用 event.stopPropagation() 方法。
转载请注明出处：http://www.pingtaimeng.com/article/detail/6257/JavaScript 和 HTML DOM