初识 js 实现自定义事件

之前写h5小游戏的时候，碰到了一种情况就是需要：当一个东西状态发生改变时，来执行相应的操作！ 这就有点类似于dom事件，只不过这是原生的事件，然后就想着是不是可以自定义事件。查了相关资料，发现其实就是我之前看的设计模式一书里的观察者模式！ 所以光看书是没有用的，还是得实战起来，才能化知识为力量，继续努力。

根据那时的理解是 绑定自定义事件就是建立一个事件的数组，往里放function， 当触发就是执行遍历数组里的方法，并且执行！！！下面就是我最简单的逻辑实现：

var myEvent={
on:function(eventName,callback){
if(!this.handles){
this.handles={}
}
if(typeof this.handles[eventName]==="undefined"){
this.handles[eventName]=[];
}
if(typeof callback==="function"){
this.handles[eventName].push(callback);
}

return this;
}，
trigger：function(eventName){
if(this.handles[eventName]){
for(var i=0,len=this.handles[eventName].length;i<len;i++){
this.handles[eventName][i]();
}
}
}
}

这样的话就实现最简单的自定义事件：

myEvent.on("test",function(){
alert("test");
});
myEvent.trigger("test");

但是发现不能再callback里传参数了，部分修改下：

trigger：function(eventName){
if(this.handles[eventName]){
for(var i=0,len=this.handles[eventName].length;i<len;i++){
this.handles[eventName][i](argument[1]);
}
}
}

myEvent.on("test",function(result){
alert(result);
});
myEvent.trigger("test","alert一下");

这还不是很完善，字面量写法暴露了属性和方法，而已容易被影响 最好还是用原型链实现比较好，

基本模式：

function EventTarget(){
this.handlers = {};
}
EventTarget.prototype = {
constructor: EventTarget,
addHandler: function(eventName, handler){
if (!this.handlers[eventName]){
this.handlers[eventName] = [];
}
this.handlers[eventName].push(handler);
},
trigger：function(eventName){
if(this.handles[eventName]){
var handlers = this.handlers[eventName];
for(var i=0,len=handlers.length;i<len;i++){
this.handlers[eventName][i](argument[1]);
}
}
},
removeHandler: function(eventName, handler){
if (this.handlers[eventName]){
var handlers = this.handlers[eventName];
for (var i=0, len=handlers.length; i < len; i++){
if (handlers[i] === handler){
break;
}
}
handlers.splice(i, 1);
}
}
};