JavaScript中手动触发冒泡自定义事件需用CustomEvent构造函数并设bubbles:true，再调用dispatchEvent()派发；监听可放在目标元素或任意祖先元素上利用冒泡机制。
在 JavaScript 中手动触发一个自定义的冒泡事件，核心是使用 CustomEvent 构造函数创建事件，并通过 dispatchEvent() 方法派发，同时确保 bubbles: true 选项开启冒泡行为。
创建可冒泡的自定义事件
必须显式设置 bubbles: true，否则事件默认不冒泡（即使自定义事件也遵循此规则）：
const event = new CustomEvent('my-custom-event', {
detail: { message: 'Hello from custom event!' },
bubbles: true, // ✅ 关键：启用冒泡
cancelable: true // 可选：允许事件被 preventDefault()
});
在目标元素上触发事件
调用 dispatchEvent() 即可触发，事件会从该元素开始向上冒泡：
const button = document.querySelector('#myButton');
button.dispatchEvent(event); // 事件从 button 开始，冒泡至父、祖父等
注意：目标元素必须存在于 DOM 中，且不是 disabled 状态（对某些事件有影响，但自定义事件一般无此限制）。
立即学习“Java免费学习笔记（深入）”；
监听并响应冒泡的自定义事件
监听可以放在任意祖先元素上（利用冒泡机制），也可放在目标元素自身：
// 监听在 body 上，捕获所有冒泡上来的 my-custom-event
document.body.addEventListener('my-custom-event', (e) => {
console.log('捕获到事件:', e.detail.message);
console.log('事件目标:', e.target); // 触发事件的原始元素
console.log('事件当前冒泡到:', e.currentTarget); // 当前监听器绑定的元素（这里是 body）
});
// 或监听在按钮自身（非冒泡阶段，仅目标阶段）
button.addEventListener('my-custom-event', (e) => {
console.log('按钮自己收到事件');
});
兼容性与替代写法（IE9+）
如果需支持旧版 IE（如 IE9–11），不能用 CustomEvent 构造函数，可改用 document.createEvent：
const event = document.createEvent('CustomEvent');
event.initCustomEvent('my-custom-event', true, true, {
message: 'Hello from legacy IE!'
});
button.dispatchEvent(event);
现代项目中推荐优先使用 new CustomEvent()，更简洁可靠。
