javascript代码实例教程-Javascript自定义事件

发布时间:2019-01-16 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-Javascript自定义事件脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 事件是与DOM交互的最常见的方式,但它也可以用于非DOM代码中--通过实现自定义事件.

实现自定义事件的原理是创建一个管理事件的对象.

第一步:创建事件对象

function EventTarget(){

    this.handlers = {};//存储结构:{事件名1:[func1,func2……],事件名2:[func1,func2……]……}

}

 

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);

    }

}

 

};

第二步:事件调用

var eventObj=new (); //实例化一个EventTarget类型

var handler=function(){

    alert(&#39;event');

};  //事件处理程序

eventObj.addHandler('alert',handler); //为eventObj对象添加一个事件处理程序`handler`

event.fire({type:'alert'});  //触发eventObj对象中的事件处理程序`handler`

event.removeHandler('alert',handler);  //删除eventObj对象中的事件处理程序`handler`

扩展:(事件继承)

我们可以让其他类型继承EventTarget的属性和方法

定义继承方法

//原型式继承

var object=function(o){//F起到中转作用,避免参入多余属性

    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');

 

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-Javascript自定义事件全部内容,希望文章能够帮你解决javascript代码实例教程-Javascript自定义事件所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。