封装javascript事件处理函数绑定和解绑代码

javascript事件处理函数的绑定和解绑都是常见的操作，还有相关的阻止事件冒泡等。

下面就分享一段代码实例，它实现了相关的封装。

代码如下:

var EventUtil = {
  addHandler:function(elem,type,handler){
    if(elem.addEventListener){
      elem.addEventListener(type,handler,false);
    }else if(elem.attachEvent){
      elem.attachEvent("on"+type,handler);
    }else{
      elem["on"+type]=handler;
    }
  },
  removeHandler:function(elem,type,handler){
    if(elem.removeEventListener){
      elem.removeEventListener(type,handler,false);
    }else if(elem.detachEvent){
      elem.detachEvent("on"+type,handler);
    }else{
      elem["on"+type]=null;
    }
  },
  getEvent:function(event){
    return event?event:window.event;
  },
  getTarget:function(event){
    return event.target||event.srcElement;
  },
  preventDefault:function(event){
    if(event,preventDefault){
      event.preventDefault();
    }else{
      event.returnValue = false;
    }
  },
  stopPropagation:function(event){
    if(event.stopPropagation){
      event.stopPropagation();
    }else{
      event.cancelBubble=true;
    }
  }
};

上面的代码实现封装效果，下面对代码进行一下简单介绍:

（1）.EventUtil.addHandler(elem,type,handler)，elem是要绑定事件处理函数的元素，type是事件处理函数的类型，不能加on，例如click事件，不能写成onclick，handler规定事件处理函数。

（2）.EventUtil.removeHandler(elem,type,handler)，elem要解绑的元素，type事件处理函数类型，第三个是事件处理函数。

（3）.EventUtil.getEvent(event)，获取兼容所有浏览器的事件对象。

（4）.EventUtil.getTarget(event)，获取触发事件的对象元素。

（5）.EventUtil.preventDefault(event)，阻止默认动作。

（6）.EventUtil.stopPropagation(event)，阻止事件冒泡行为。