方式一：

new CustomEvent(事件名称, {
    detail,
    bubbles,
    cancelable
});

detail：配置项，默认值为null。

bubbles：是否能冒泡

cancelable：是否可取消该事件

el.dispatchEvent(事件名称） 触发事件

let custom = new CustomEvent('test_event', {
    detail: { e_name: "this is a test" }
})
// 某个 dom 元素监听自定义事件
let div = document.createElement("DIV");
div.addEventListener("test_event",function(e){
    console.log(e.detail.e_name)
    },false)
// 触发自定义事件（dispatchEvent 除非事件的参数是必填项，切必须为事件对象）
div.dispatchEvent(custom) // this is a test 

方式二:

const ev = document.createEvent(“eventType”)

创建事件，得到一个event的对象实例

初始化事件

ev.initEvent(事件名称， 是否可以冒泡， 是否组织事件的默认操作)
// ev.initMouseEvent();
// ev.initUIEvent();

ev.initEvent("alert", false, false);

触发事件

element.dispatchEvent(ev);  // 弹出 alert

补充

补充：原生自定义事件的标准用法分三步：

  1. 创建：new CustomEvent(name, options)，options 含 detail / bubbles / cancelable / composed；
  2. 监听：target.addEventListener(name, handler, useCapture)；
  3. 触发：target.dispatchEvent(event)。

现代项目通常使用 EventTarget / EventEmitter / 自发布订阅替代繁琐的 DOM 自定义事件，但 CustomEvent 仍是浏览器原生跨组件通信的简单方案（Vue 2 的 $on / $emit 内部就基于此）。

来源整理自：vue3js.cn 面试官系列