自定义事件dispatchEvent，initEvent，createEvent方法说明及使用

对于标准浏览器，其提供了可供元素触发自定义事件的方法：element.dispatchEvent().。
不过，在使用该方法之前，我们还需要做其他两件事，即创建和初始化。
1、createEvent()
createEvent()方法返回新创建的Event对象，支持一个参数，表示事件类型，具体见下表：

参数	事件接口	初始化方法
HTMLEvents	HTMLEvent	initEvent()
MouseEvents	MouseEvent	initMouseEvent
UIEvents	UIEvent	initUIEvent

2、initEvent()
initEvent()方法用于初始化通过DocumentEvent接口创建的Event的值。

支持三个参数：initEvent(eventName, canBubble, preventDefault)
分别表示：

• 事件名称
• 是否可以冒泡
• 是否阻止事件的默认操作
  - 3、dispatchEvent()
  dispatchEvent()就是触发执行了，dom.dispatchEvent(eventObject)
  参数eventObject表示事件对象，是createEvent()方法返回的创建的Event对象。

var evt = document.createEvent("MouseEvents");
    evt.initEvent("click", true, true);
    document.getElementById("imgLogin").addEventListener("click",function(){
        console.log("我是jquery");
    })
    document.getElementById("imgLogin").dispatchEvent(evt);

二、自定义事件

1、Event
自定义事件的函数有 Event、CustomEvent 和 dispatchEvent

// 向 window派发一个resize内置事件
window.dispatchEvent(new Event('resize'))
 

// 直接自定义事件，使用 Event 构造函数：
var event = new Event('build');
var elem = document.querySelector('#id')
// 监听事件
elem.addEventListener('build', function (e) { ... }, false);
// 触发事件.
elem.dispatchEvent(event);

2、CustomEvent
CustomEvent 可以创建一个更高度自定义事件，还可以附带一些数据，具体用法如下：

var myEvent = new CustomEvent(eventname, options);
其中 options 可以是：
{
  detail: {
    ...
  },
  bubbles: true,    //是否冒泡
  cancelable: false //是否取消默认事件
}

其中 detail 可以存放一些初始化的信息，可以在触发的时候调用。其他属性就是定义该事件是否具有冒泡等等功能。

内置的事件会由浏览器根据某些操作进行触发，自定义的事件就需要人工触发。
dispatchEvent 函数就是用来触发某个事件：

element.dispatchEvent(customEvent);

上面代码表示，在 element 上面触发 customEvent 这个事件。
结合起来用就是：

// add an appropriate event listener
obj.addEventListener("cat", function(e) { process(e.detail) });
 
// create and dispatch the event
var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}});
obj.dispatchEvent(event);
使用自定义事件需要注意兼容性问题，而使用 jQuery 就简单多了：

// 绑定自定义事件
$(element).on('myCustomEvent', function(){});
 
// 触发事件
$(element).trigger('myCustomEvent');
// 此外，你还可以在触发自定义事件时传递更多参数信息：
 
$( "p" ).on( "myCustomEvent", function( event, myName ) {
  $( this ).text( myName + ", hi there!" );
});
$( "button" ).click(function () {
  $( "p" ).trigger( "myCustomEvent", [ "John" ] );
});

jQuery解决浏览器兼容性问题的方法。

三、自定义事件的删除

与触发事件不同，事件删除，各个浏览器都提供了对应的事件删除方法，如removeEventListener和detachEvent。
参考：https://www.jianshu.com/p/5f9027722204