初识 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); 
          }
      }
};