自定义事件

先介绍一下需要用到的函数

1. document.createEvent()
   作用：createEvent() 方法创建新的Event 对象
   语法：createEvent(eventType)
   参数：eventType：想获取的 Event 对象的事件模块名;
   返回值：返回新创建的Event 对象，具有指定的类型
   下表列出了 eventType 的合法值和每个值创建的事件接口：

用该方法创建了 Event 对象以后，不同的eventType必须用上表中所对应的初始化方法初始化对象。

1. Event.initEvent()
   作用：初始化新事件对象的属性，需要在调用dispatchEvent前调用
   语法：event.initEvent(eventType,canBubble,cancelable)
   参数：eventType：事件的类型；canBubbl：事件是否起泡；cancelable：是否可以用 preventDefault() 方法取消事件
   返回值：无

2. 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