前两天看公司项目，看见了一段代码，其中的createEvent方法很眼生，看名字也知道这个方法是创建一个事件的。当时心中有两个想法，一个是一直学习vue项目js这方面自己不知道如何自定义事件，自己竟然也没有发觉。另一个是，vue明明有自己的组件之间触发事件的方式为什么不用呢，可能是有其他因素吧。

createEvent方法的使用

不推荐使用，但是还是看一下使用方法吧，毕竟项目里的代码还在用这个方法。

let event = document.createEvent(type);

代码中使用的是"HTMLEvents"

// 创建事件event
let event = document.createEvent('type');

// 初始化事件event
// 参数一：事件名，参数二：是否允许冒泡，参数三：是否允许中断
event.initEvent('eventName', true, true);

// 监听event自定义事件的事件名
dom.addEventListener('eventName', function (e) {
}, false);

// 触发event自定义事件
dom.dispatchEvent(event);

Event() 和 CustomEvent()

触发事件，不带数据

Event构造函数接受两个参数。第一个参数type是字符串，表示事件的名称；第二个参数options是一个对象，表示事件对象的配置。该对象主要有下面两个属性。

默认不冒泡，默认不会被preventDefault()取消默认事件函数所取消。

// 创建一个对象
let event = new Event('eventName', {bubbles:true,cancelable:false});

// 监听自定义事件
dom.addEventListener('eventName', function (e) { ... });

// 触发自定义事件
dom.dispatchEvent(event);

触发事件，带有数据

// 创建一个对象，数据放在detail中
// 默认不冒泡
let event = new CustomEvent('eventName', {bubbles:true,cancelable:false,detail: { ··· }});

// 监听自定义事件
dom.addEventListener('eventName', function (e) { ... });

// 触发自定义事件
dom.dispatchEvent(event);

domAdispatchEvent触发事件后，只有domA（和包含它元素，如果开启冒泡的话）能监听到，因为可能多个dom元素都在监听一个自定义事件，而你只想让其中一个dom触发该事件的情况存在。