鸦杀's Blog

自定义事件

2016-07-14

刚啃完zepto的event事件机制,正好重温下自定义事件对象。

在手动触发事件时,我们可以简单的调用相应的方法。比如触发点击:$('.J_button').click()它如此便捷,仅仅只是zepto为我们写了一些快捷方法而已,当未传参数时,内部调用了zepto的trigger()方法。

而trigger()它总是与另一个方法$.Event()息息相关。正是$.Event()完成了自定义事件对象的创建和初始化操作,而trigger()方法负责触发(这里,我们不去关注focus/blur,以及那些不支持dispatchEvent的情况)

完成一个自定义事件的创建并触发需要调用三个方法:

  • step1,document.createEvent(eventType),创建对象,这里eventType可选的值可以参考下面这张表格:

DOM3事件类型

  • step2,event.initEvent(eventType,canBubble,cancelable),根据事件类型调用相应的初始化方法。这里initEvent()方法用于初始化通过DocumentEvent接口创建的Event的值。

|参数|描述|
|eventType|事件类型|
|canBubble|是否冒泡|
|cancelable|是否可以用preventDefault()阻止默认事件|

  • step3,element.dispatchEvent(event),触发事件

最后放一个example:

1
2
3
4
5
6
7
var event = new Event('build');  

// Listen for the event.
elem.addEventListener('build', function (e) { ... }, false);

// Dispatch the event.
elem.dispatchEvent(event);
Tags: 事件

扫描二维码,分享此文章