Javascript自定義事件

事件定義

事件是與DOM交互的最多見的方式,但它也能夠用於非DOM代碼中--經過實現自定義事件.實現自定義事件的原理是建立一個管理事件的對象.以下代碼是事件的定義:

function EventTarget(){
this.handlers = {};//存儲事件處理程序,由n個鍵值對組成,鍵表示事件名,值是一個由事件處理程序組成的數組
}

EventTarget.prototype = {

constructor:EventTarget,

//添加事件
addHandler:function(type,handler){

    if(typeof this.handlers[type] == "undefined"){
        this.handlers[type] = [];
    }
    this.handlers[type].push(handler);
    
},

//觸發事件
fire:function(event){

    if(!event.target){
        event.target = this;
    }

    if(this.handlers[event.type] instanceof Array){

            var handlers = this.handlers[event.type];
            for(var i=0,len=handlers.length;i < len;i++){
                //將event傳遞給事件處理程序,event.target表明對象自己,
                event.type表明事件名,你能夠根據狀況爲添加event屬性
                handlers[i](event);
            }
    }

},

//移除事件
removeHandler:function(type,handler){

    if(this.handlers[type] instanceof Array){
    
        var handlers=this.handlers[type];
        
        for(var i=0,len=handlers.length;i < len; i++){
            if(handlers[i] == handler){
                break;
            }
        }
        
        handlers.splice(i,1);
    }
}

};

首先是定義了一個名爲EventTarget的構造函數,爲其定義的屬性handlers用於存儲事件處理程序,
而後有三個操做方法添加到EventTarget的原型中,分別是addHandler fire remocveHander.

• addHander是向handlers中添加事件處理程序

• fire是觸發handlers中的事件處理程序

• removeHandler是向handlers中移除事件處理程序
  注:事件處理程序通俗的講就是事件被觸發時須要執行的方法.

事件調用

var eventObj=new EventTarget(); //實例化一個EventTarget類型

var handler=function(){
    alert('event');
};  //事件處理程序

eventObj.addHandler('alert',handler); //爲eventObj對象添加一個事件處理程序`handler`

event.fire({type:'alert'});  //觸發eventObj對象中的事件處理程序`handler`

event.removeHandler('alert',handler);  //刪除eventObj對象中的事件處理程序`handler`

事件繼承

固然咱們也能夠經過繼承讓其餘引用類型繼承EventTarget的屬性和方法.

//原型式繼承
var object=function(o){
    function F(){}
    F.prototype=o;
    return new F();
};


//subType繼承superType的原型對象
var inheritPrototype=function(subType,superType){

    var prototype=object(superType.prototype);
    prototype.constructor=subType;
    subType.prototype=prototype;

}

function Person(name,age){
    
    EventTarget.call(this);//繼承EventTarget的屬性
    this.name = name;
    this.age = age;
}

inheritPrototype(Person,EventTarget);//繼承EventTarget的方法

Person.prototype.say=function(message){
    this.fire({type:'message',message:message}); //觸發事件
};

//事件處理程序
var handMessage=function(event){

    alert(event.target.name + "says:" + event.message);

};

var person=new Person('yhlf',29);
person.addHandler('message',handMessage);
person.say('Hi there');

使用自定義事件有助於解耦相關對象,保持功能的隔絕,在不少狀況下,觸發事件的代碼和監聽事件的代碼是徹底分離的.