CustomEvent 自定义事件

在使用angular或vue框架的时候，有时会遇到innerHTML插入dom代码片段的情况。如何在angular中和这个代码片段交互，我一直在用postMessage发送消息的方式，需要在组件初始化的时候监听消息，组件销毁的时候取消监听，说实话这样写有点难受。直到用到了CustomEvent自定义事件，这才是与原生 DOM 交互的解决之道。

JavaScript 的 CustomEvent 接口允许你创建和触发自定义事件，这是实现组件间通信、解耦代码和模拟用户行为的强大工具。

1. 基本语法

1
new CustomEvent(type, options);

• type: 事件类型（字符串），如'myEvent','dataLoaded'。

• options（可选）: 一个对象，包含以下属性：

• detail: 任意数据，随事件传递（可以是字符串、数字、对象、数组等）。

• bubbles:true/false，是否允许事件冒泡。

• cancelable:true/false，是否允许调用preventDefault()。

• composed:true/false，是否可以在 Shadow DOM 跨越边界冒泡（用于 Web Components）。

2.创建和触发自定义事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 1. 创建自定义事件
const myEvent = new CustomEvent('userLogin', {
  detail: {
    username: 'alice',
    timestamp: Date.now(),
    role: 'admin'
  },
  bubbles: true,
  cancelable: true
});

// 2. 触发事件（在某个 DOM 元素上）
document.getElementById('loginBtn').dispatchEvent(myEvent);
// 或者在 window 上
// window.dispatchEvent(myEvent);

3. 监听自定义事件

1
2
3
4
5
6
7
8
9
10
// 使用 addEventListener 监听
document.getElementById('loginBtn').addEventListener('userLogin', function(e) {
  console.log('用户登录了:', e.detail.username);
  console.log('角色:', e.detail.role);
});

// 或监听 window
window.addEventListener('userLogin', (e) => {
  console.log('全局监听到登录:', e.detail);
});

4. 在angular中的使用

1
2
3
4
5
6
7
8
9
10
11
12
// html
<div [innerHTML]="dynamicHtml" (custom-event-copy)="copy($event)"></div>

// ts
htmlstr = `<span class="json-format-btn" onclick="this.dispatchEvent(new CustomEvent('custom-event-copy', { detail: '${path}', bubbles: true,cancelable: true }))">复制</span>`

this.dynamicHtml = this.ds.bypassSecurityTrustHtml(htmlstr)

copy(e: any) {
  e.preventDefault()
  let data = e.detail.split('.')
}

在ts中有一段dom片段htmlstr。 通过原生js的方式，给class=json-format-btn的span标签绑定onclick事件，这个onclick事件会创建一个自定义的custom-event-copy事件，并且通过detail传递数据。 在html中(custom-event-copy)="copy($event)"。 这样当点击json-format-btn的时候，会通过事件冒泡触发angular的copy方法。