js使用dispatchEvent派发自定义事件

这里暂不介绍对低版本IE的兼容。。。

标准浏览器中使用dispatchEvent派发自定义事件：element.dispatchEvent()，除此之外，还有创建和初始化事件：

一般的流程是：创建 >> 初始化 >> 派发。

对应的事件流程：document.createEvent() >> event.initEvent() >> element.dispatchEvent()

先来个实例**demo1**，控制台输出了一个Event对象：

"div">


复制代码

其中，

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">


复制代码

CustomEvent 可以创建一个更具体的自定义事件，并且可以携带额外的参数：new CustomEvent(eventname, options):

其中options可以是：

{
  detail: {
    ...
  },//键名必须是detail
  bubbles: true,    //是否冒泡
  cancelable: false //是否取消默认事件
}
复制代码

"div">



结果输出：{username: 123}
复制代码

与此类似的有Jquery里面的trigger事件：

之前有一篇文章专门介绍的trigger的用法总结

$( "p" ).on( "myEvent", function( event, param ) {
 alert(param);
});
$( "p" ).trigger( "myEvent", [ "123" ] );
复制代码

转载于:https://juejin.im/post/5cc6ee96f265da036706b53f