事件定义
事件是与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');
使用自定义事件有助于解耦相关对象,保持功能的隔绝,在很多情况下,触发事件的代码和监听事件的代码是完全分离的.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。