自定义事件的触发dispatchEvent

最新推荐文章于 2024-06-20 13:16:51 发布

原创最新推荐文章于 2024-06-20 13:16:51 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

H5 专栏收录该内容

32 篇文章

订阅专栏

本文详细介绍了JavaScript中自定义事件的创建与使用，包括Event和CustomEvent的构造函数，以及如何通过dispatchEvent触发事件。同时，文章还讲解了如何利用CustomEvent传递详细信息，并提供了事件删除的方法。

参考：http://www.zhangxinxu.com/wordpress/2012/04/js-dom%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6

文章目录

一、自定义事件

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 （这个key 是固定的）可以存放一些初始化的信息，可以在触发的时候调用。其他属性就是定义该事件是否具有冒泡等等功能。

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

element.dispatchEvent(customEvent);

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

	var obj = document.getElementById('obj');
 	// 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);

二、自定义事件的删除

与触发事件不同，事件删除，各个浏览器都提供了对应的事件删除方法，如removeEventListener和detachEvent。
不过呢，对于IE浏览器，还要多删除一个事件，就是为了实现触发功能额外增加的onpropertychange事件：

dom.detachEvent("onpropertychange", evt);

var fireEvent = function(element,event){ 
   if (document.createEventObject){ 
       // IE浏览器支持fireEvent方法 
       var evt = document.createEventObject(); 
       return element.fireEvent('on'+event,evt) 
   } else{ 
       // 其他标准浏览器使用dispatchEvent方法 
       var evt = document.createEvent( 'HTMLEvents' ); 
       evt.initEvent(event, true, true); 
       return !element.dispatchEvent(evt); 
   } 
};