Event || CustomEvent
| 特性 | Event | CustomEvent |
|---|---|---|
| 定义 | 原生 DOM 基础事件对象 | 继承自 Event，支持自定义数据传递 |
| 能否携带数据 | ❌ 不能 | ✅ 能（通过 detail 属性） |
原生 Event
// 创建普通事件
const event = new Event('click');
// 通过 dispatchEvent 就能触发element身上监听或绑定的事件，
// 不管是addEventListener添加的
// 还是 <div id="example1" onclick="say()">example1</div>
element.dispatchEvent(event);
CustomEvent
// 创建带数据的事件
const event = new CustomEvent('update', {
detail: { id: 123, value: 'trimmed' } // 自定义数据
});
element.dispatchEvent(event);
element.addEventListener('update', (e) => {
console.log('element---update', e.detail);
})
项目中的应用场景
譬如针对项目里面的所有输入类表单做 前后空格 去除， 可以使用 自定义指令+触发自定义事件
- main.js
app.directive('trim', {
mounted(el) {
const handler = (e) => {
const target = e.target
target.value = target.value.trim()
// DOM 的值改变了，但 Vue 的 `v-model` 不会自动更新, 触发`v-model` 本质上监听的是 `input` 或 `change` 事件
target.dispatchEvent(new Event('input'))
}
// 失去焦点 时处理
el.addEventListener('blur', handler)
}
})
<a-input
v-model:value='submitForm.serviceVersion'
v-trim
placeholder='请输入'
/>
