js简易版自定义事件及其应用

COME FROM

老话题,关于js的自定义事件,用处很多(控件控都懂的..),最明显的是实现观察者模式.

简易版代码:

 1 function Class1(){      
 2     } 
 3     Class1.prototype ={ 
 4         //间接调用 
 5         evt : function(){ 
 6             if(this.onEvt){ 
 7                 for(i=0; i<this.onEvt.length; i++){ 
 8                     this.onEvt[i]();    //逐个调用处理函数 
 9                 } 
10             } 
11         }, 
12         //添加事件处理函数 
13         attchOnEvt : function(_eventHandler){ 
14             if(!this.onEvt) 
15                 this.onEvt = [];    //存放事件处理函数 
16             this.onEvt.push(_eventHandler); 
17         }, 
18         //删除 
19         detachOnEvt : function(_eventHandler){ 
20             this.onEvt.pop(_eventHandler); 
21         }        
22     } 
23     
24     //包装下事件处理函数,使其可以接收参数 
25     function MakeFunc(obj,strFunc){ 
26         var args = [];    //存放参数 
27         if(!obj) 
28             obj = window; 
29         for(var i=2; i<arguments.length; i++){ 
30             args.push(arguments[i]); 
31         } 
32         return function(){ 
33             obj[strFunc].apply(obj,args);    //调用具体处理函数 
34         } 
35         
36     } 
37     
38     //处理函数-路人甲 
39     function _eventFunc(sName){ 
40         console.log("i'm "+ sName); 
41     } 
42     
43     //test 
44     var obj = new Class1(); 
45     obj.attchOnEvt(MakeFunc(null, "_eventFunc", "kobe")); 
46     obj.evt(); 
47     obj.detachOnEvt(MakeFunc(null, "_eventFunc", "kobe")); 
48     obj.evt();    

主要涉及到参数传递问题,由于事件处理函数是没有参数的,所以用了个包装类将其转换了下,实现了参数的传递,主要是arguments和apply的使用.

 

相关

jq提供了实现自定义事件的函数.主要是bind,unbind,trigger顾名思义就是用来实现事件绑定以及触发.

比较简单,直接上代码(列子是实现观察者模式),具体使用查api

 1 //被观察对象
 2 var Subject = {
 3 };    
 4 $(Subject).bind("evtHandler",function(event,sName){
 5     console.log("i'm "+sName);
 6 })
 7 
 8 //观察者
 9 var Observer = {
10     count : 0
11 };
12 //订阅事件
13 Observer.regist = function(){
14     $(Subject).bind("evtHandler.Observer",function(event,sName){
15                     Observer.count++;    //当订阅的事件被触发时,进行逻辑处理
16                     console.log(sName +"'s count: "+Observer.count);
17                     })
18 } 
19 Observer.regist();
20 
21 //触发事件
22 $(Subject).trigger("evtHandler",["num1"]);

 

其他:关于jq的事件处理实现细节可以查看源代码,园子里有个源码分析系列的,偷懒的话可以看看.