Javascript自定义事件

Date:2015/01/19       Cat:开发者手册       Word:共1357字             

自定义事件在很多地方都会用到,然后跟着书实例了几次,然后详细注释,也算给自己做了一个笔记。

 1 //定义一个自定义事件类
 2 //定义一个实例属性用以单独为每一个实例创建独立的事件集
 3 function EventTarget() {  
 4 
 5     this.handles = {};  
 6 
 7 };
 8 
 9  EventTarget.prototype = {
10 
11      //构造函数的指针指向事件本身
12      constructor: EventTarget, 
13 
14 
15      //添加事件代码的函数,接受两个参数,一个为事件的类型一个为事件的处理程序
16      addHandle: function(type, handle) { 
17 
18 
19         //检测添加的事件类型是否存在
20          if(typeof this.handles[type] == 'undefined'){ 
21 
22 
23          //如果不存在则新创建一个,类型为数组,如果存在则push进数组
24              this.handles[type] = []; 
25          }; 
26 
27 
28          this.handles[type].push(handle); 
29 
30      }, 
31 
32      //事件触发函数,接受一个对象,对象至少包括一个type属性
33      fire: function(event) {  
34 
35 
36          //检测传入进来的对象target属性是否存在,如果没有则设置一个指向当前实例的指针
37          if(!event.target) { 
38              event.target = this; 
39          }; 
40 
41          //检测传入的对象里面事件类型是否存在
42          if(this.handles[event.type] instanceof Array) { 
43 
44 
45              //如果存在则把此事件集赋值给handles变量
46              var handles = this.handles[event.type];  
47 
48 
49              //循环检测事件集中的事件处理程序,并且执行每一个事件处理程序
50              var i;
51              for(i= 0, len = handles.length; i<len; i++) {  
52 
53 
54                  //执行事件处理程序,并且传入event对象
55                  handles[i](event);  
56 
57              }; 
58 
59          } 
60 
61      }, 
62 
63 
64      //删除事件程序,接受两个参数,一个为事件类型,一个为事件处理程序
65      removeHandles: function(type,handle) {  
66 
67 
68          //检测事件类型是否存在
69          if(this.handles[type] instanceof Array) { 
70 
71 
72              //把此事件的引用赋值给handles变量
73              var handles = this.handles[type];  
74 
75 
76              //循环此事件类型集
77              var i;
78              for(i= 0, len = handles.length; i < len; i++) { 
79 
80 
81                  //检查此事件集中每一个事件处理程序是否和传入进来的handle绝对等于。
82                  if(handles[i] === handle) {  
83 
84 
85                  //如果等于跳出当前循环,不等于继续循环
86                      break;  
87 
88                  }; 
89 
90              }; 
91 
92 
93              //通过数组的splice方法,把获取到的事件位置i值,已经数值1传入进splice方法删除事件处理程序。
94              handles.splice(i,1);  
95          }; 
96      }; 
97  };
98     

 

《Javascript自定义事件》留言数:0

发表留言