事件是一种叫做观察者的设计模式,观察者模式由两类对象组成:主体和观察者。主体负责发布事件,同时观察者通过订阅这些事件来观察该主体。拿DOM来说,DOM就是主体,事件处理代码便是观察者。
下面是一个自定义事件,
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);}}
}
自定义事件的调用,addHandler() 添加事件,fire() 执行事件,removeHandler() 删除绑定的事件。
function handleMessage1(event) {console.log("111--", event.message);
}
function handleMessage2(event) {console.log("222--", event.message);
}
var target = new EventTarget();
// 添加事件
target.addHandler('message', handleMessage1);
target.addHandler('message', handleMessage2);
// 执行事件
target.fire({type: 'message',message: 'hello!'
})// 删除事件
target.removeHandler('message', handleMessage1);
// 执行事件
target.fire({type: 'message',message: 'holy'
})