使用dispatchEvent派发自定义事件
这里暂不介绍对低版本IE的兼容。。。
标准浏览器中使用dispatchEvent派发自定义事件：element.dispatchEvent()，除此之外，还有创建和初始化事件：
一般的流程是：创建 >> 初始化 >> 派发。
对应的事件流程：document.createEvent() >> event.initEvent() >> element.dispatchEvent()
先来个实例demo1，控制台输出了一个Event对象：
<div id="div">div>
<script>
var elem = document.querySelector('#div');
var event = document.createEvent('Event');
// 定义事件名称myEvent
event.initEvent('myEvent', true, true);
// 监听myEvent
elem.addEventListener('myEvent', function (e) {
console.log(e);
}, false);
// 使用目标对象去派发事件，可以是元素节点/事件对象
elem.dispatchEvent(event);
script>其中，
1.createEvent()方法返回新创建的Event对象，支持一个参数，表示事件类型
| 参数 | 事件接口 | 初始化方法 |
|---|---|---|
| HTMLEvents | HTMLEvent | initEvent() |
| MouseEvents | MouseEvent | initMouseEvent() |
| UIEvents | UIEvent | initUIEvent() |
| MutationEvents | MutationEvent | initMutationEvent() |
2.initEvent()方法用于初始化通过DocumentEvent接口创建的Event的值。
支持三个参数：initEvent(eventName, canBubble, preventDefault).
分别表示： 事件名称，是否可以冒泡，是否阻止事件的默认操作
3.dispatchEvent()就是触发执行了，element.dispatchEvent(eventObject),
参数eventObject表示事件对象，是createEvent()方法返回的创建的Event对象。
比较常用的，
//向window派发resize事件
window.dispatchEvent(new Event('resize'))还可以用Event、CustomEvent去定义自定义事件的函数，所以上面demo1也可以这么改写为demo2：
<div id="div">div>
<script>
var elem = document.querySelector('#div');
var event = new Event('myEvent');
elem.addEventListener('myEvent', function (e) {
console.log(e)
}, false);
elem.dispatchEvent(event);
script>CustomEvent 可以创建一个更具体的自定义事件，并且可以携带额外的参数：new CustomEvent(eventname, options):
其中options可以是：
{
detail: {
...
},//键名必须是detail
bubbles: true, //是否冒泡
cancelable: false //是否取消默认事件
}<div id="div">div>
<script>
var elem = document.querySelector('#div');
elem.addEventListener("myEvent", function(e) { console.log(e.detail) });
var event = new CustomEvent("myEvent", {"detail":{"username":123}});
elem.dispatchEvent(event);
script>
结果输出：{username: 123}与此类似的有Jquery里面的trigger事件：
之前有一篇文章专门介绍的trigger的用法总结
$( "p" ).on( "myEvent", function( event, param ) {
alert(param);
});
$( "p" ).trigger( "myEvent", [ "123" ] );