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

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

简易版代码:

function Class1(){      
    } 
    Class1.prototype ={ 
        //间接调用 
        evt : function(){ 
            if(this.onEvt){ 
                for(i=0; i<this.onEvt.length; i++){ 
                    this.onEvt[i]();    //逐个调用处理函数 
                } 
            } 
        }, 
        //添加事件处理函数 
        attchOnEvt : function(_eventHandler){ 
            if(!this.onEvt) 
                this.onEvt = [];    //存放事件处理函数 
            this.onEvt.push(_eventHandler); 
        }, 
        //删除 
        detachOnEvt : function(_eventHandler){ 
            this.onEvt.pop(_eventHandler); 
        }        
    } 
    
    //包装下事件处理函数,使其可以接收参数 
    function MakeFunc(obj,strFunc){ 
        var args = [];    //存放参数 
        if(!obj) 
            obj = window; 
        for(var i=2; i<arguments.length; i++){ 
            args.push(arguments[i]); 
        } 
        return function(){ 
            obj[strFunc].apply(obj,args);    //调用具体处理函数 
        } 
        
    } 
    
    //处理函数-路人甲 
    function _eventFunc(sName){ 
        console.log("i'm "+ sName); 
    } 
    
    //test 
    var obj = new Class1(); 
    obj.attchOnEvt(MakeFunc(null, "_eventFunc", "kobe")); 
    obj.evt(); 
    obj.detachOnEvt(MakeFunc(null, "_eventFunc", "kobe")); 
    obj.evt();    

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

 

相关

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

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

//被观察对象
var Subject = {
};    
$(Subject).bind("evtHandler",function(event,sName){
    console.log("i'm "+sName);
})

//观察者
var Observer = {
    count : 0
};
//订阅事件
Observer.regist = function(){
    $(Subject).bind("evtHandler.Observer",function(event,sName){
                    Observer.count++;    //当订阅的事件被触发时,进行逻辑处理
                    console.log(sName +"'s count: "+Observer.count);
                    })
} 
Observer.regist();

//触发事件
$(Subject).trigger("evtHandler",["num1"]);

 

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