业务层可取消自定义事件系统基于cancelable: true的CustomEvent，通过preventDefault()实现监听者干预流程；EventBus封装中emit同步执行回调并遇defaultPrevented即中断；DOM场景可挂载到真实元素复用该机制。
在业务层封装一个支持取消的自定义事件系统，核心是利用 CustomEvent 的 cancelable: true 选项 + event.preventDefault() 机制，并配合事件发布/订阅模型进行控制。它不是单纯“触发就完事”，而是让监听者能主动干预流程（比如表单提交前校验失败时中止后续操作）。
1. 创建可取消的 CustomEvent 实例
必须显式设置 cancelable: true，否则调用 preventDefault() 无效，defaultPrevented 始终为 false：
const event = new CustomEvent('userLogin', {
detail: { userId: 123, token: 'abc' },
cancelable: true // ? 关键！不加这行，无法取消
});
触发后检查是否被阻止：
const result = element.dispatchEvent(event);
if (!result) {
// dispatchEvent 返回 false 表示事件被 preventDefault() 阻止
console.log('登录流程已被拦截');
}
2. 封装事件总线（Event Bus）并支持取消语义
用 Map 存储事件名到回调列表，提供 on、emit、off 方法。重点在于 emit 中统一处理取消逻辑：
立即学习“前端免费学习笔记（深入）”；
class EventBus {
constructor() {
this.events = new Map();
}
<p>on(type, callback) {
if (!this.events.has(type)) this.events.set(type, []);
this.events.get(type).push(callback);
}</p><p>off(type, callback) {
if (!this.events.has(type)) return;
const listeners = this.events.get(type);
const index = listeners.indexOf(callback);
if (index > -1) listeners.splice(index, 1);
}</p><p>emit(type, detail = {}) {
const listeners = this.events.get(type) || [];
const event = new CustomEvent(type, {
detail,
cancelable: true
});</p><pre class="brush:php;toolbar:false;">// 按注册顺序同步执行，任一监听者调用 preventDefault() 即中断后续
for (const cb of listeners) {
cb(event);
if (event.defaultPrevented) break; // ? 主动退出循环
}
return !event.defaultPrevented; // 返回 true 表示未被阻止} }
使用示例：
const bus = new EventBus();
<p>bus.on('orderSubmit', (e) => {
if (!validateOrder(e.detail)) {
e.preventDefault(); // 阻止后续流程
}
});</p><p>bus.on('orderSubmit', (e) => {
console.log('发送订单请求'); // 这行不会执行，因上一个已 preventDefault()
});</p><p>const canProceed = bus.emit('orderSubmit', { items: [...] });
// canProceed === false
3. 在 DOM 元素上复用该机制（可选但实用）
若需与原生 DOM 交互（如按钮点击后派发业务事件），可将业务事件挂载到真实元素上，保持事件流一致性：
const button = document.querySelector('#submitBtn');
<p>button.addEventListener('click', () => {
const event = new CustomEvent('businessAction', {
detail: { action: 'createOrder', payload: {} },
cancelable: true
});</p><p>const continue = button.dispatchEvent(event);
if (!continue) return; // 被业务逻辑取消，不执行默认行为</p><p>// 否则继续：跳转、提交表单等
submitForm();
});
这样前端组件、Vue/React 的业务逻辑均可通过监听 businessAction 并调用 preventDefault() 来参与控制权决策。
4. 注意事项与边界情况
⚠️ 不要混淆 cancelable 和 bubbles：
- cancelable 控制能否调用 preventDefault()；
- bubbles 控制事件是否冒泡，和取消无关。
- 所有监听器必须同步执行（不能 await 异步回调），否则
defaultPrevented状态无法及时影响后续监听器 - 避免在事件处理中修改
detail对象后又期望其他监听器看到——建议深拷贝或约定只读 - 如果需要异步校验（如调接口判断是否允许提交），应提前拦截原生事件，用 Promise 驱动状态，而非依赖
CustomEvent的同步取消
