使用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" ] );