封裝javascript事件處理函式繫結和解綁程式碼

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)，阻止事件冒泡行為。