JS原生事件處理(跨瀏覽器)


一.關於獲取事件對象

FF有點倔強,只支持arguments[0],不支持window.event。這次真的不怪IE,雖然把event作為window的屬性不合規范,但大家都已經默許這個小問題存在了,只有FF這么多年了還是特立獨行。所以,跨瀏覽器的事件對象獲取有以下兩種方式:

  1. 帶參的:

    getEvent : function(event){
        return event ? event : window.event;
        //return event || window.event;//或者更簡單的方式
    }
  2. 無參的:

    function getEvent() {
        return arguments[0] ? arguments[0] : window.event;
        //return arguments[0] || window.event;//或者更簡單的方式
    }

需要特別說明一種方式:HTML的DOM0級方式 + 帶參的事件處理器,如下:

function handler(event){
    //do something
}

<!-- HTML的DOM0級方式 -->
<button id="btn" onclick="handler(event);">按鈕</button>

上面這種方式是全瀏覽器兼容的,但依賴HTML的DOM0級方式的缺點很明顯,所以沒能成為像前兩種那樣的主流方法,而JS的DOM0級方式 + 帶參的事件處理器,如下:

function handler(event){
    //do something
}
btn.onclick = handler;//JS的DOM0級方式
//btn.onclick = function(event){/*do something*/}//或者匿名函數,效果同上

這種方式不是全瀏覽器兼容的,[IE8-]不支持,IE9+未知,FF,Chrome支持。一直以為HTML的DOM0級事件處理和JS的DOM0級事件處理是等價的,現在做了很多實驗才發現二者是有區別的

二.關於獲取事件源

event.srcElement是[IE8-]唯一的方式,IE9+未知,其它瀏覽器都支持標准的event.target方式

三.關於阻止事件默認行為

event.preventDefault()是標准方法,但[IE8-]不支持,IE自己的方式是event.returnValue = false;

四.關於停止事件傳播

event.stopPropagation()是標准方法,IE又有意見了,他要這么玩:event.cancelBubble = true;這里需要特別注意了,因為cancel是屬性而不是方法,與標准相差甚遠,容易記錯

五.關於事件處理器的添加和移除

  1. DOM0級方式

    ele.onclick = handler;ele.onclick=null;最古老的一種方式

    優點:全瀏覽器兼容

    缺點:同一事件只能綁定/解綁一個事件處理器

  2. DOM2級方式

    ele.add/removeEventListener(eventType, handler, catch);

    和IE方式:ele.attach/detachEvent(‘on’+eventType, handler);

    優點:支持綁定/解綁多個事件處理器

    缺點:需要做兼容性判斷。需要注意的是:標准方式中最后一個參數表示是否在事件捕獲階段綁定/解綁,IE不支持事件捕獲,所以也就沒有第三個參數了

    注意:IE方式不僅方法名與標准不同,參數中事件類型還要加上on,否則綁定無效但不報錯

六.跨瀏覽器的事件處理

//跨瀏覽器的事件處理器添加方式
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方式的規則是最后添加的最先觸發
        }
        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只有能顯示的字符鍵才觸發,FF其它鍵也能觸發,返回值為0*/
    getCharCode : function(event){
        if(typeof event.charCode == "number"){
            return event.charCode;
        }
        else{
            return event.keyCode;
        }
    }
};

以上代碼整理自《JavaScript高級程序設計》中文版,書中getRelatedTarget有點問題(P373),本文已經做了修正

書中addHandler是不支持以DOM0級方式添加多個事件處理器的,修改之后可以支持,但不支持移除單一事件處理器,所以代碼仍然不完整,如果要支持DOM0級事件處理器的添加/移除操作,可以手動維護一個事件處理器隊列,鑒於實現這種方式沒有太大意義,此處不再展開

參考資料


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM