遇到的问题

1.自定义事件

自定义事件的本质是发布订阅模式，中间是通过事件联系的。为什么要自定义事件，主要是为了更高层面上的抽象，dom节点的事件偏向底层，我们要偏向应用层级，要给对象自定义事件，比如对于一个盒子，我们可以定义一个open和close事件，然后再通过click事件来触发。具体代码如下。

var domBtn=$("#btn");
domBtn.on("click",function () {
   open();
});
var open=function () {
   alert("盒子打开了");
}

这就是一个最简单的自定义事件，在这里我们自定义了一个open事件，并在外面实现了这个open方法。然后每次点击按钮的时候，都会触发这个open事件。

但是这个写法 有很多问题，如果想要定义多个事件，则后面的会覆盖前面的。

var open=function () {
   alert("盒子打开了");
}
var open=function () {
   alert("重新打开盒子");
}

所以，我们可以参照jquery的写法，也可以写一个on方法：

function Widget() {
   this.handlers={};
}
Widget.prototype ={
   on:function (type,handler) {
      if(typeof this.handlers[type]==="undefined"){
         this.handlers[type]=[];
      }
      this.handlers[type].push(handler);
      return this;
   },
   fire:function (type,data) {
      if(this.handlers[type] instanceof Array){
         var handlers=this.handlers[type];
         for(var i=0;i<handlers.length;i++){
            handlers[i](data);
         }
      }
   }
};

其中，on是给这个对象注册事件，参数分别是事件的名字，回调函数。再看on方法是怎么执行的，比如box.on("click",function(){});执行过程

首先判断handlers对象中有没有type这个属性，如果没有，则将type设置为一个数组，然后将传进来的函数push进type数组。

再看fire函数，就是遍历type这个数组，将数组里的方法全部执行一遍。其实jquery的on方法原理和这差不多。

具体的调用：比如有一个box对象,一个btn按钮。

box.on("alert",function () {
   alert("you click the button")
})
btn.onclick=function () {
   box.fire("alert");
}

1. 收获
   

2. 1.学会了自定义事件。