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;

 

转载于:https://www.cnblogs.com/sir-jarvis/p/customEvent.html