定制事件 观察者模式

事件模型是观察者模式的一种类型

 
原理就是:对象在它生命周期里当一个特别状态出现的时候下可以发布事件,其他对象可以观察这个对象,等待那些特别状态出现的时候再做出反应。
 
观察者模式由两种类型对象组成:
subject  : 就是负责发布事件的
observer: 观察者就是负责观察subject  ,通过订阅那些事件
 
需要注意的是,subject  并不知道任何关于observer的信息,即使observer不存在它也能照常运行。但是observer是了解subject的,并且给它会发布的事件注册了event handle;
例如当你在处理一个Dom时,那个Dom元素就是subject,event handle就是observer。
 
事件在和Dom交互的时候经常使用,但事件模式也可以在non-Dom情况下通过定制事件来使用:原理就是通过创建一个对象来管理事件,允许其他对象去监听这些事件
 
举例:
function EventTarget(){
     this.handlers = {};                     用来保存event  handle
}
 
EventTarget.prototype = {
        constructor: EventTarget,
addHandler: function(type, handler){
if (typeof this.handlers[type] == “undefined”){            判断时候存在这个事件类型,存在就把event加到对应类型的数组里
     this.handlers[type] = [];
}
this.handlers[type].push(handler);
},
fire: function(event){
if (!event.target){
     event.target = this;
}
if (this.handlers[event.type] instanceof Array){                 查看对应事件类型的event handle,再一一调用这个handle
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;                                                      当找到需要删除的event handle就退出for循环,从事件回调数组中删除该event handle
}
}
        handlers.splice(i, 1);
}
};
 
使用方法:
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);
原文地址:https://www.cnblogs.com/chuangweili/p/5166353.html