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

字號(hào):


    本文實(shí)例為大家分享了js事件處理程序跨瀏覽器解決方案,供大家參考,具體內(nèi)容如下
    <!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!");
    }
    //聲明一個(gè)對(duì)象
    var eventUtil={
    //添加句柄
     addHandler:function(element,type,handler){
    //DOM2級(jí)事件處理判斷
     if(element.addEventListener){
     element.addEventListener(type,handler,false);
     }else if(element.attachEvent){//IE事件處理判斷
     element.attachEvent('on'+type,handler);
     }else{//DOM0級(jí)事件判斷
     element['on'+type]=handler;
     }
    },
    //刪除句柄
    removeHandler:function(element,type,handler){
    //DOM2級(jí)事件處理判斷
    if(element.removeEventListener){
     elememt.removeEventListener(type,handler,false);
    }else if(element.detachEvent){//IE事件處理判斷
     element.detachEvent('on'+type,handler);
    }else{//DOM0級(jí)事件判斷
     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);//添加多個(gè)同一類型的handler時(shí),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;//支持添加多個(gè)事件處理器
          }
        }
      },
      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點(diǎn)擊左鍵和中鍵都是0;FF無(wú)法識(shí)別中鍵;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;
          }
        }
      },
      /*只能檢測(cè)keypress事件,返回值等于將要顯示的字符編碼*/
      /*IE和Chrome只有能顯示的字符鍵才觸發(fā),F(xiàn)F其它鍵也能觸發(fā),返回值為0*/
      getCharCode : function(event){
        if(typeof event.charCode == "number"){
          return event.charCode;
        }
        else{
          return event.keyCode;
        }
      }
    };
    以上就是本文的全部?jī)?nèi)容,希望對(duì)大家解決js事件處理程序跨瀏覽器有所幫助。