event事件的注册,监听及触发
在JS的业务应用中,现代的js框架基本都提供了自定义事件的封装..
那么其实现方式是如何的。。本章将一起瞻顾下其原生的event对象,以及最新的DOM3的Event事件支持..
> 1.如何自定义一个事件 |
var event = document.createEvent(type);
* event 是通过event创建的实例对象
* type 是一个当前需要被创建的自定义事件的类型字符串。可能的事件类型包括
“UIEvents”, “MouseEvents”,“MutationEvents”以及“HTMLEvents”
具体的事件对象查看下表
event Module | Event type to pass to createEvent | Method to be used to initialize the event |
---|---|---|
DOM Level 2 Events | ||
User Interface event module | "UIEvents" |
event.initUIEvent |
Mouse event module | "MouseEvents" |
event.initMouseEvent |
Mutation event module | "MutationEvents" |
event.initMutationEvent |
HTML event module | "HTMLEvents" |
event.initEvent |
DOM Level 3 Events | ||
User Interface event module | "UIEvent" , "UIEvents" |
event.initUIEvent |
Mouse event module | "MouseEvent" , "MouseEvents" |
event.initMouseEvent |
Mutation event module | "MutationEvent" , "MutationEvents" |
event.initMutationEvent |
Mutation name event module (not implemented in Gecko as of June 2006) | "MutationNameEvent" |
event.initMutationNameEvent |
Text event module | "TextEvent" (Gecko also supports"TextEvents" ) |
event.initTextEvent (not implemented) |
Keyboard event module | "KeyboardEvent" (Gecko also supports"KeyEvents" ) |
event.initKeyEvent (Gecko-specific; the DOM 3 Events working draft uses initKeyboardEvent instead) |
Custom event module | "CustomEvent" |
event.initCustomEvent |
Basic events module | "Event" (Gecko also supports "Events" ) |
event.initEvent |
SVG 1.1 Scripting | ||
SVG | "SVGEvents" (Gecko also supports"SVGEvent" ) |
event.initEvent |
"SVGZoomEvents" (Gecko also supports"SVGZoomEvent" ) |
event.initUIEvent | |
Other event types supported by Gecko | ||
- | "MessageEvent" |
event.initMessageEvent |
"MouseScrollEvents" , "PopupEvents" |
event.initMouseEvent | |
"PopupBlockedEvents" |
event.initPopupBlockedEvent | |
"XULCommandEvent" , "XULCommandEvents" |
event.initCommandEvent | |
Progress Events | "ProgressEvent" |
ProgressEvent.initProgressEvent() Deprecated since Gecko 22.0 |
Animation Events | "AnimationEvent" (or"WebKitAnimationEvent" for WebKit/Blink-based browsers) |
AnimationEvent.initAnimationEvent() Deprecated since Gecko 23.0 |
Transition Events | "TransitionEvent" (or"WebKitTransitionEvent" for WebKit/Blink-based browsers) |
TransitionEvent.initTra |
同样事件也同样可以通过事件对象Event来创建
var event = new Event('test'); //监听事件 element.addEventListener('test', function(){ ... }, false); //事件分发 element.dispatchEvent(event); //大部分的主流浏览器都支持该构造函数,IE是个屌丝,注定不一样 //在ie中创建事件对象 var event = document.createEvent('test'); event.initEvent('test', true, true);
也可在内置的事件类型中触发
如:
function 模拟点击() { var event = new MouseEvent('click', { 'view': window, 'bubbles': true, //冒泡 'cancelable': true, //是否能被取消 }); var cb = document.getElementById('li'); var canceled = !cb.dispatchEvent(event); if (canceled) { alert("取消"); } else { alert("没有取消"); } }
> 2. 事件分发 |
在指定的事件目标中进行事件的调度,其调用受到EventListeners的注册顺序影响
正常的事件处理规则(包括捕获和可选的冒泡阶段)同样适用于手动调度通过dispatchEvent();
语法:
canceled = !target.dispatchEvent(event)
event
是即将被分发的事件对象target
被用于初始化事件对象Event.target 以及决定哪个事件接收者调用- 只要有一个事件的处理函数让这个事件对象被Event.preventDefault()-阻止默认事件调用那么返回值是false。其他情况都返回true.
如果事件类型没有被初始化,那么调用他讲抛出一个UNSPECIFIED_EVENT_TYPE_ERR
的异常
需要注意的是。MDN已经认为通过createEvent创建事件对象的方式是过时的。而新的自定义事件则通过
CustomEvent这个构造函数来替代它
我们来看看MDN对它的描述
The DOM
CustomEvent
are events initialized by an application for any purpose.DOM CustomEvent是被用于任意目的的初始化
方法前瞻:
void initCustomEvent(in DOMString type, in boolean canBubble, in boolean cancelable, in any detail);
属性:
Attribute | Type | Description |
detail | any | The data passed when initializing the event |
USage
obj.addEventListener("cat", function(e) { process(e.detail) }); var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}}); obj.dispatchEvent(event);
当然IE9乃至IE10目前仍然没支持。所以需要兼容IE
function CustomEvent ( event, params ) { params = params || { bubbles: false, cancelable: false, detail: undefined }; var evt = document.createEvent( 'CustomEvent' ); evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail ); return evt; }; CustomEvent.prototype = window.CustomEvent.prototype; window.CustomEvent = CustomEvent;