Ext2.2源码解析(一) -- Ext.util.Event

1. (function(){
3.    // 创建一个缓存性的监听器，当某个事件连续发生时，只有当时间停止一段事件，
4.    // 事件响应函数才会触发
5.     var createBuffered = function(h, o, scope){
6.         var task = new Ext.util.DelayedTask();
7.         return function(){
8.             task.delay(o.buffer, h, scope, Array.prototype.slice.call(arguments, 0));
9.         };
10.     };
12.     // 创建触发一次的监听器
13.     var createSingle = function(h, e, fn, scope){
14.         return function(){
15.             e.removeListener(fn, scope);
16.             return h.apply(scope, arguments);
17.         };
18.     };
20.     // 创建延时触发的事件监听器
21.     var createDelayed = function(h, o, scope){
22.         return function(){
23.             var args = Array.prototype.slice.call(arguments, 0);
24.             setTimeout(function(){
25.                 h.apply(scope, args);
26.             }, o.delay || 10);
27.         };
28.     };
30.     // Ext封装的事件对象
31.     Ext.util.Event = function(obj, name){
32.         this.name = name;     // 事件的名称
33.         this.obj = obj;       // 事件发生的对象
34.         this.listeners = [];  // 事件的监听器
35.     };
37.     Ext.util.Event.prototype = {
38.           /*
39.            * 给当前事件增加一个事件监听器
40.            *
41.            * 参数：
42.            *      fn      - 事件响应函数
43.            *      scope   - 事件的作用域
44.            *      options - 事件监听器的属性 如是否延时响应等
45.            */
46.         addListener : function(fn, scope, options){
47.               // 将事件响应函数的作用域设置为指定的作用域或事件发生的对象
48.             scope = scope || this.obj;
49.             
50.             // 如果scope作用域下的fn响应函数还没有注册，则注册，否则不重复注册
51.             if(!this.isListening(fn, scope)){
52.                   //  创建事件监听器
53.                 var l = this.createListener(fn, scope, options);
54.                 
55.                 // 判断事件是否已经触发
56.                 if(!this.firing){
57.                       // 如果事件还没有触发，则将事件加入到监听器列表中
58.                     this.listeners.push(l);
59.                 }else{ 
60.                       // 如果事件已经触发，不打扰已注册监听器的执行，
61.                       // 重新将监听器列表复制一份，监听器列表指向复制后的副本
62.                     this.listeners = this.listeners.slice(0);
63.                     // 将当前监听器增加到监听器列表中
64.                     this.listeners.push(l);
65.                 }
66.             }
67.         },
69.         /*
70.            * 创建一个监听器对象
71.            *
72.            * 参数：
73.            *      fn      - 事件响应函数
74.            *      scope   - 事件的作用域
75.            *      options - 事件监听器的属性 如是否延时响应等
76.            */
77.         createListener : function(fn, scope, o){
78.             o = o || {};
79.             
80.             // 将事件响应函数的作用域设置为指定的作用域或事件发生的对象
81.             scope = scope || this.obj;
82.             
83.             // 创建事件监听器对象
84.             var l = {fn: fn, scope: scope, options: o};
85.             
86.             var h = fn;
87.             if(o.delay){
88.                   // 创建延时触发的事件监听器
89.                 h = createDelayed(h, o, scope);
90.             }
91.             if(o.single){
92.                   // 创建触发一次的监听器
93.                 h = createSingle(h, this, fn, scope);
94.             }
95.             if(o.buffer){
96.                   // 创建一个缓存性的监听器，当某个事件连续发生时，只有当时间停止一段事件，
97.                   // 事件响应函数才会触发
98.                 h = createBuffered(h, o, scope);
99.             }
100.             l.fireFn = h;
101.             return l;
102.         },
104.         /*
105.            * 在监听器列表中查找指定作用域下的事件响应函数
106.            *
107.            * 参数：
108.            *      fn      - 事件响应函数
109.            *      scope   - 事件的作用域
110.            * 
111.            * 返回值：如果已经注册，返回该响应函数在监听器中的索引，否则返回-1
112.            */
113.         findListener : function(fn, scope){
114.             scope = scope || this.obj;
115.             var ls = this.listeners;
116.             for(var i = 0, len = ls.length; i < len; i++){
117.                 var l = ls[i];
118.                 if(l.fn == fn && l.scope == scope){
119.                     return i;
120.                 }
121.             }
122.             return -1;
123.         },
125.         /*
126.            * 判断指定作用域下的事件响应函数是否已注册
127.            *
128.            * 参数：
129.            *      fn      - 事件响应函数
130.            *      scope   - 事件的作用域
131.            */
132.         isListening : function(fn, scope){
133.             return this.findListener(fn, scope) != -1;
134.         },
136.         /*
137.            * 删除指定作用域下的事件响应函数
138.            *
139.            * 参数：
140.            *      fn      - 事件响应函数
141.            *      scope   - 事件的作用域
142.            */
143.         removeListener : function(fn, scope){
144.             var index;
145.             if((index = this.findListener(fn, scope)) != -1){
146.                   // 如果事件还没有触发，则直接删除监听器
147.                 if(!this.firing){
148.                     this.listeners.splice(index, 1);
149.                 }else{
150.                       // 如果事件已经触发，不打扰已注册监听器的执行，
151.                       // 重新将监听器列表复制一份，监听器列表指向复制后的副本
152.                     this.listeners = this.listeners.slice(0);
153.                     // 在新的监听器列表中删除该监听器
154.                     this.listeners.splice(index, 1);
155.                 }
156.                 return true;
157.             }
158.             return false;
159.         },
161.         /* 
162.          * 删除该事件的监听器列表
163.            */
164.         clearListeners : function(){
165.             this.listeners = [];
166.         },
168.         /* 
169.          * 事件触发，执行各个监听器中的响应函数
170.            */
171.         fire : function(){
172.             var ls = this.listeners, scope, len = ls.length;
173.             if(len > 0){
174.                   // 修改事件触发标志位为“已触发”
175.                 this.firing = true;
176.                 var args = Array.prototype.slice.call(arguments, 0);
177.                 for(var i = 0; i < len; i++){
178.                     var l = ls[i]; 
179.                     // 调用事件监听器中的事件响应函数
180.                     if(l.fireFn.apply(l.scope||this.obj||window, arguments) === false){
181.                           // 如果监听器链中有一个事件响应函数返回false，则不触发后面的监听器
182.                         this.firing = false;
183.                         return false;
184.                     }
185.                 }
186.                 // 修改事件触发标志位为“未触发”
187.                 this.firing = false;
188.             }
189.             return true;
190.         }
191.     };
192. })();