先介绍一下需要用到的函数
- document.createEvent()
作用：createEvent() 方法创建新的Event 对象
语法：createEvent(eventType)
参数：eventType：想获取的 Event 对象的事件模块名;
返回值：返回新创建的Event 对象，具有指定的类型
下表列出了 eventType 的合法值和每个值创建的事件接口：
| 参数 | 事件接口 | 初始化方法 |
|---|---|---|
| HTMLEvents | HTMLEvent | iniEvent() |
| MouseEvents | MouseEvent | iniMouseEvent() |
| UIEvents | UIEvent | iniUIEvent() |
用该方法创建了 Event 对象以后，不同的eventType必须用上表中所对应的初始化方法初始化对象。
Event.initEvent()
作用：初始化新事件对象的属性，需要在调用dispatchEvent前调用
语法：event.initEvent(eventType,canBubble,cancelable)
参数：eventType：事件的类型；canBubbl：事件是否起泡；cancelable：是否可以用 preventDefault() 方法取消事件
返回值：无DOM.dispatchEvent()
作用：dispatchEvent() 方法给节点分派一个合成事件。
语法：dispatchEvent(evt)
参数：evt:要分派的 Event 对象。
返回值：如果在事件传播过程中调用了 evt 的 preventDefault() 方法则返回 false，否则返回 true。
示例的代码如下
// 创建事件
var myEvent = document.createEvent('HTMLEvents');
myEvent.hello='hello,I am event';//可在event
// 定义事件类型
myEvent.initEvent('customEvent', true, true);
// 在元素上监听事件
var oBody = document.querySelector('body');
oBody.addEventListener('customEvent', function(e){
console.log(e)
console.log(e.hello)
e.target.innerHTML = 'customEvent 事件被触发了'
}, false);
setTimeout((o,e)=>{
//触发事件
o.dispatchEvent(e)
},2000,oBody,myEvent)
2秒，控制台打印出
Event {isTrusted: false, hello: "hello,I am event", type: "customEvent", target: body, currentTarget: body, …}
hello,I am event
