使用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');// 定义事件名称myEventevent.initEvent('myEvent', true, true);// 监听myEventelem.addEventListener('myEvent', function (e) {console.log(e);}, false);// 使用目标对象去派发事件，可以是元素节点/事件对象elem.dispatchEvent(event);script>

其中，
1.createEvent()方法返回新创建的Event对象，支持一个参数，表示事件类型

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: {...},//键名必须是detailbubbles: 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" ] );

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！