首页 > 编程语言 > 详细

Javascript自定义事件

时间:2015-09-29 01:26:52      阅读:126      评论:0      收藏:0      [点我收藏+]

事件是与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(‘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‘);


Javascript自定义事件

原文:http://benbird.blog.51cto.com/3148258/1698908

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!