通过检查事件对象上的 bubbles 属性来判断，该属性是一个布尔值，若为 true 表示事件可冒泡，若为 false 表示不可冒泡。在 javascript 中，大多数用户交互事件（如 click、keydown）默认是可冒泡的，而一些底层或合成事件（如 focus、blur、load）则不可冒泡。开发者可以通过 new event('type', { bubbles: true }) 显式创建可冒泡的事件，或通过 new event('type', { bubbles: false }) 创建不可冒泡的事件。
如何创建一个可冒泡的自定义事件
要创建一个可冒泡的自定义事件，需要在实例化 Event 对象时将 bubbles 选项设置为 true。这样当事件被触发时，它会从目标元素向上传播到根节点，允许父级监听器捕获它。以下代码演示了如何在按钮上触发一个名为 myCustomEvent 的可冒泡事件，并在父容器和文档根节点上监听该事件。
const button = document.getElementById('myButton');
// 创建并触发可冒泡的自定义事件
button.addEventListener('click', function() {
const event = new Event('myCustomEvent', { bubbles: true });
button.dispatchEvent(event);
});
// 父容器监听
button.parentElement.addEventListener('myCustomEvent', (e) => {
console.log('Parent caught:', e.bubbles); // true
});
// 文档根节点监听
document.addEventListener('myCustomEvent', (e) => {
console.log('Document caught:', e.bubbles); // true
});
运行上述代码后，点击按钮会在控制台输出两行日志，均显示 true，证明事件成功冒泡至父容器和文档根节点，且 bubbles 属性保持为 true。
如何创建一个不可冒泡的自定义事件
若要创建一个不可冒泡的自定义事件，需在实例化时将 bubbles 选项设置为 false。此时事件仅停留在目标元素上，不会向上传播，父级监听器将无法接收到该事件。以下代码展示了如何创建一个不可冒泡的事件，并验证其传播范围仅限于目标元素本身。
const button = document.getElementById('myButton');
// 创建并触发不可冒泡的自定义事件
button.addEventListener('click', function() {
const event = new Event('silentEvent', { bubbles: false });
button.dispatchEvent(event);
});
// 父容器监听（不会触发）
button.parentElement.addEventListener('silentEvent', (e) => {
console.log('Parent caught:', e.bubbles); // 不会执行
});
// 目标元素自身监听
eventTarget.addEventListener('silentEvent', (e) => {
console.log('Target caught:', e.bubbles); // false
});
运行上述代码后，点击按钮仅在目标元素自身的监听器中触发回调，控制台输出 false，父容器和更高层级的监听器不会被调用，证实事件未发生冒泡。
不同原生事件的bubbles属性表现差异
JavaScript 中的原生事件根据其设计目的具有不同的 bubbles 属性值。例如，click 事件是可冒泡的，而 focus 和 blur 事件是不可冒泡的。开发者可以通过直接触发这些事件并检查其 bubbles 属性来验证这一行为。以下代码对比了 click 和 focus 事件的 bubbles 属性值，展示它们在冒泡行为上的根本差异。
const input = document.getElementById('myInput');
input.addEventListener('focus', function(e) {
console.log('Focus bubbles:', e.bubbles); // false
});
input.addEventListener('click', function(e) {
console.log('Click bubbles:', e.bubbles); // true
});
当用户聚焦输入框时，控制台输出 false；当用户点击输入框时，控制台输出 true。这表明原生事件的行为由浏览器规范定义，开发者无法通过修改 bubbles 属性来改变原生事件的冒泡特性，但可以在自定义事件中自由控制。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
