自定义事件:让一个函数能够具备事件的某些特性。主要是跟函数有关。

我们都知道,相同名字的函数会被覆盖,如:

function show(){
  alert(1);
}

function show(){
  alert(2);
}

function show(){
  alert(3);
}

show()    //这时只会弹出3,因为最后定义的show函数将前边的覆盖了。

当我们换一种写法,将它写成事件的样子,就不会覆盖:

window.addEventListener('show',function(){
  alert(1);
},false);

window.addEventListener('show',function(){
  alert(2);
},false);

window.addEventListener('show',function(){
  alert(3);
},false);

show();   //触发自定义事件

其实show还是函数,只是让它具有了事件的特性。这样添加的事件不会覆盖。

自定义事件:

//添加自定义事件

function addEvent(obj,events,fn){
  obj.handlers=obj.handlers||{};
  obj.handlers[events]=obj.handlers[events] || [];
  obj.handlers[events].push(fn);
  if(obj.addEventListerner){
    obj.addEventListerner(events,fn,false);
  }eles{
    obj.attachEvent('on'+events,fn);
  }
}

 

//主动触发自定义事件

function fireEvent(obj,events){

  if(obj.handlers[events]) {

    for (var i=0;i<obj.handlers[events].length;i++){

      obj.handlers[events][i]();

    }

  }

}

addEvent(oDiv,'show',function(){

  alert(3);

});

addEvent(oDiv,'show',function(){

  alert(4);

});

fireEvent(oDiv,'show');    //3,4