js高级技巧----自定义事件

浏览数：47 / 时间：2015年06月09日

自定义事件

原本的事件处理的原理：事件是javascript与浏览器交互的主要途径。

事件是一种叫做观察者的设计模式

观察者模式由两类对象组成：主体和观察者。

主体用于发布事件；

观察者通过订阅这些事件来观察该主体。

自定义事件的原理：

将事件处理程序保存在一个数组中；

当添加事件的时候，我们push进去这个事件处理函数；

当我们执行的时候，从头遍历这个数组中的每个事件处理函数，并执行。

自定义事件应该具有的内容：

1.一个handler对象，对象中保存着存放事件处理函数的数组

handler = {

‘click’ : [func1,func2],

‘my’ : [func3,func4]

}

2.一个addhandler函数，用于添加事件处理函数

3.一个removehandler函数，用于删除事件处理函数

4.一个fire函数，用于执行所添加的函数。

注：使用原型模式来创建自定义事件对象。

代码如下：

 1 function EventTarget(){
 2     /*
 3     * handlers:用来存储时间处理程序
 4     */
 5     this.handlers = {};
 6 }
 7 EventTarget.prototype = {
 8     constructor : EventTarget,
 9     /*
10     * addHandler:用于注册给定类型事件的事件处理程序
11     * type:自定义的事件类型，任意字符串
12     * handler：自定义的事件处理函数
13     */
14     addHandler : function( type,handler ){
15         if( typeof this.handlers[type] == "undefined" ){
16             this.handlers[type] = [];
17         }
18         this.handlers[type].push( handler );
19     },
20     /*
21     * fire:用于触发一个事件
22     * event:是一个事件对象，可以自定义它拥有的属性
23     */
24     fire : function( event ){
25         if( !event.target ){
26             event.target = this;
27         }
28         if( this.handlers[event.type] instanceof Array){
29             var handlers = this.handlers[event.type];
30             for( var i=0,len=handlers.length;i<len;i++ ){
31                 handlers[i]( event );
32             }
33         }
34     },
35     /*
36     * removeHandler:用于注销某个事件类型的事件处理程序
37     */
38     removeHandler : function( type,handler ){
39         if( this.handlers[type] instanceof Array ){
40             var handlers = this.handlers[type];
41             for( var i=0,len=handlers.length;i<len;i++ ){
42                 if( handlers[i] == handler){
43                     break;
44                 }
45             }
46             handlers.splice( i,1 );
47         }
48     }
49 }