事件是一种称做观察者的设计模式,是一种创建松散耦合代码的技术。对象可以发布事件,以表示该对象声明周期中某个有趣的时刻到了。其他对象可以观察该对象,等待有趣的时刻到来并通过运行代码来响应。观察者模式由两类对象组成:主体和观察者。
❑主体负责发布事件,同时观察者通过订阅这些事件来观察主体。
❑主体并不知道观察者的任何事情,它可以独自存在并正常运作(即使观察者不在)。
自定义事件就是对已经存在的事件进行包装,也就是说,自定义事件在执行的时候还是需要依赖已有的键盘、鼠标、HTML等事件来执行,或者由其他函数触发执行,这里的触发是指直接调用自定义事件中声明的某个接口方法,以便不断执行添加到自定义事件中的函数。
自定义事件内部有一个事件存储器,它根据添加的事件的类型不同来存储各个类的事件执行函数,当再次触发这类事件时,就轮询执行添加到该类型下的函数。自定义事件隐含的作用是创建一个管理事件的对象,让其他对象监听那些事件。基于自定义事件的原理,可以想象自定义事件很多时候用于实现订阅—发布—接收性质的功能。
❑基本模式:
function EventTarget{
this.handlers={};
}
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++){
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类型的自定义事件的方法如下:
function handleMessage(event){
alert("message received:"+event.message);
}
//创建一个新对象
var target=new EventTarget;
//添加一个事件处理程序
target.addHandler("message",handleMessage);
//触发事件
target.fire({
type:"message",
message:"hello world!"
});
//删除事件处理程序
target.removeHandler("message",handleMessage);
❑使用实例:
function Person(name,age){
eventTarget.call(this);
this.name=name;
this.age=age;
}
inheritPrototype(Person,EventTarget);
Person.prototype.say=function(message){
this.fire({
type:"message",
message:message
});
};
function handleMessage(event){
alert(event.target.name+"says:"+event.message);
}
//创建新person
var person=new Person("Nicholas",29);
//添加一个事件处理程序
Person.addHandler("message",handleMessage);
//在该对象上调用一个方法,它触发消息事件
person.say("Hi there");