Javascript自定义事宜

2024年3月21日 167次阅读 来源: yuhualingfeng

事宜定义

事宜是与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');

运用自定义事宜有助于解耦相干对象,坚持功用的阻隔,在许多状况下,触发事宜的代码和监听事宜的代码是完整星散的.

    原文作者：yuhualingfeng
    原文地址: https://segmentfault.com/a/1190000003754821
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞