js事件處理程序跨瀏覽器解決方案

更新時間：2016年03月27日 09:57:40 投稿：lijiao

這篇文章主要為大家詳細介紹了js事件處理程序跨瀏覽器解決方案，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js事件處理程序跨瀏覽器解決方案，供大家參考，具體內容如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>
　　<input type="button" id="button1" value="按鈕" />
</div>
<script type="text/javascript">
　　function show(){
　　　　alert("Hello world!");
　　}
　　//聲明一個對象
　　var eventUtil={
　　//添加句柄
　　　　addHandler:function(element,type,handler){
　　//DOM2級事件處理判斷
　　　　if(element.addEventListener){
　　　　　　element.addEventListener(type,handler,false);
　　　　}else if(element.attachEvent){//IE事件處理判斷
　　　　　　element.attachEvent('on'+type,handler);
　　　　}else{//DOM0級事件判斷
　　　　　　element['on'+type]=handler;
　　　　}
　　},
　　//刪除句柄
　　removeHandler:function(element,type,handler){
　　//DOM2級事件處理判斷
　　if(element.removeEventListener){
　　　　elememt.removeEventListener(type,handler,false);
　　}else if(element.detachEvent){//IE事件處理判斷
　　　　element.detachEvent('on'+type,handler);
　　}else{//DOM0級事件判斷
　　　　element['on'+type]=null;
　　　　}
　　}
}
　　eventUtil.addHandler(button3,'click',show);
</script>

</body>
</html>

再為大家分享js原生事件處理跨瀏覽器的代碼：

//跨瀏覽器的事件處理器添加方式
var EventUtil = {
  addHandler : function(elem, type, handler){
    if(elem.addEventListener){
      elem.addEventListener(type, handler, false);
    }
    else if(elem.attachEvent){
      elem.attachEvent("on" + type, handler);//添加多個同一類型的handler時，IE方式的規(guī)則是最后添加的最先觸發(fā)
    }
    else{
      if(typeof elem["on" + type] === 'function'){
        var oldHandler = elem["on" + type];
        elem["on" + type] = function(){
          oldHandler();
          handler();
        }
      }
      else{
        elem["on" + type] = handler;//支持添加多個事件處理器
      }
    }
  },

  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;
    }
  },

  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;//不支持移除單一事件處理器，只能全部移除
    }
  },

  stopPropagation : function(event){
    if(event.stopPropagation){
      event.stopPropagation();
    }
    else{
      event.cancelBubble = true;
    }
  },

  getRelatedTarget : function(event){
    if(event.relatedTarget){
      return event.relatedTarget;
    }
    else if(event.toElement && event.type == "mouseout"){
      return event.toElement;
    }
    else if(event.fromElement && event.type == "mouseover"){
      return event.fromElement;
    }
    else{
      return null;
    }
  },

  /*IE8點擊左鍵和中鍵都是0；FF無法識別中鍵；Chrome正常*/
  getButton : function(event){//返回0，1，2 - 左，中，右
    if(document.implementation.hasFeature("MouseEvents", "2.0")){
      return event.button;
    }
    else{
      switch(event.button){
        case 0:case 1:case 3:case 5:case 7:
          return 0;
          break;
        case 2:case 6:
          return 2;
          break;
        case 4:
          return 1;
          break;
        default:
          break;
      }
    }
  },

  /*只能檢測keypress事件，返回值等于將要顯示的字符編碼*/
  /*IE和Chrome只有能顯示的字符鍵才觸發(fā)，FF其它鍵也能觸發(fā)，返回值為0*/
  getCharCode : function(event){
    if(typeof event.charCode == "number"){
      return event.charCode;
    }
    else{
      return event.keyCode;
    }
  }
};

以上就是本文的全部內容，希望對大家解決js事件處理程序跨瀏覽器有所幫助。

您可能感興趣的文章: