JS--事件對象中部份瀏覽器不兼容方法

 測試時主要用的瀏覽器是Firefox 28.0、IE11、IE8、Chrome 34.0 

一、什么是事件對象：當觸發某個事件的時候，會產生一個事件對象，這個對象包含着所有的與事件有關的信息，包括導致事件的元素、事件的類型、以及其它與特定事件相關的信息。

　　事件對象：我們一般稱作為event對象，這個對象是瀏覽器通過函數把這個對象作為參數傳遞過來的，可以通過arguments來獲得函數傳遞過來的參數。

    function box(){
        alert(arguments.length);    //0
    }
    box();

    var box=document.getElementById("box");        //獲得HTML界面上id為box的DIV 對象
    box.onclick=function(){
        alert(arguments.length);    //1    在事件綁定函數中獲得了一個隱藏的變量
    }

    box.onclick = function(){
        alert(argument.length);        //1
        alert(typeof arguments[0]);    //object
        alert(arguments[0]);            //IE11: object PointerEvent        Firefox/Chroms: obejct MouseEvent
    }
    

　　通過arguments可以獲得事件綁定函數中瀏覽器傳遞過來的參數對象，event，但是這種方式比較麻煩，可以通過直接接受參數的方法，但是存在瀏覽器的兼容性問題，  

//兼容方法　　IE11和Chrome對下面兩種方法都支持，Firefox只是支持第一種，IE8支持第二中
    window.onload = function(){ 3         var input = document.getElementsByTagName("input")[0]; 4         input.onclick=function(event){　　//這個參數名稱可以隨便取 5             var e = event || window.event; 6  alert(e); 7  } 8     }

 

二、鼠標事件  　　

　　鼠標事件中的onclick是被單擊事才觸發的事件，因此檢測的信息不是很重要，但是對於onmousedown和onmouseup事件中，event對象提供了一個button屬性，用來獲得鼠標按下的是哪一個鍵值    存在瀏覽器的兼容性問題

　　//Firefox、Chrome、IE11 : 0(左鍵)、1(中鍵滾輪)、2(右鍵)
  　//IE8 ：1(左鍵)、4(中鍵滾輪)、2(右鍵)

//做兼容
    function getButton(event){  3         var e = event || window.event;  4         if(event){        //非IE8及以下，都支持這個屬性，並且button屬性和W3C返回的是一樣的
            return e.button;    //直接返回
        }else if(window.event){  7             switch(e.button){  8                 case 1 : return 0;  9                 case 4 : return 1; 10                 case 2 : return 2; 11  } 12  } 13  } 14     
    //調用
    document.onmouseup=function(event){ 17         var button = getButton(event); 18         if(button == 0){ 19             alert("按下了左鍵"); 20         }else if(button ==1 ){ 21             alert("按下了中鍵滾輪"); 22         }else{ 23             alert("按下了右鍵"); 24  } 25     }

　　獲得可視區以及屏幕的坐標，默認單位是像素 px

    document.onclick = function(event){ 2         var e = event || window.event; 3         alert(e.clientX);    //可視區X坐標，點擊的地方距離可視區左邊邊框的距離
        alert(e.clientY);    //可視區X坐標，點擊的地方距離可視區上邊邊框的距離
        
        alert(e.screenX);    //屏幕X坐標，點擊的地方距離整個屏幕左邊的距離
        alert(e.screenY);    //屏幕Y坐標，點擊的地方距離整個屏幕上面的距離
    }

 

　　修改鍵 ，通過event對象來判斷是否是按下了ctrl、shift、Alt鍵   

　

//修改鍵        
    document.onclick = function(event){
        var e = event || window.event;
        if(e.ctrlKey){
            alert("按下了ctrl鍵");
        }
        if(e.shiftKey){
            alert("按下了shift鍵");
        }
        if(e.altKey){
            alert("按下了Alt鍵");
        }
    }
    
    //這三個鍵可以同時按下，那么上面三個都會答應出來，我們可以通過一個方法來獲得按下的鍵
    document.onclick = function(event){
        var keys = getKeys(event);
        alert(keys);
    }
    
    function getKeys(event){
        var e = event || window.event;
        var keys=[];
        
        if(e.ctrlKey){
            keys.push("Ctrl");
        }
        if(e.shiftKey){
            keys.push("shift");
        }
        if(e.altKey){
            keys.push("alt");
        }
        return keys;
    }

 

三、鍵盤事件  

　　鍵碼 ：在發生 onkeydown 和 onkeyup 事件的時候，event對象中的keyCode屬性會包含一個代碼值， 與鍵盤上一個特定的鍵對應。對數字和字母字符集，keyCode返回的就是對應的ASCII值，不區分大小寫  

    document.onkeyup = function(event){
        var e = event || window.event;
        alert(e.keyCode);
    }

  　　//PS: Firefox 和 Safari 中分號鍵返回的是59，而其他幾款瀏覽器返回的則是186  

　　字符編碼  ：Firefox、Chrome 和 Safari 的 event 對象都支持一個 charCode 屬性，這個屬性只有在發生 keypress 事件時才包含值，而且這個值是按下的那個鍵所代表字符的 ASCII 編碼。此時的 keyCode 通常等於 0 或者也可能等於所按鍵的編碼。

　　　　 IE 和 Opera 則是在 keyCode 中保存字符的 ASCII 編碼。

　　　　 keypress:按鍵按下並且松開時才會觸發的事件，等價於onclick

　　　　需要做瀏覽器的兼容

document.onkeypress = function(event){ 2         var e = event || window.event; 3         if(typeof e.charKode == "number"){ 4             alert(e.charCode);    //火狐、IE11、chrome都支持
        }else{ 6             alert(e.keyCode);        //IE8 ，Chrome、IE11
 } 8     }

　　PS: 火狐中按F5鍵同樣會有值返回，而shift等鍵按下的時候沒有值輸入，因為它根本就不會觸發這個事件    

　　可以通過方法 String.fromCharCode(); 方法將ASCII值轉換成實際的字符

 

四、W3C 與 IE  

　　在標准的DOM級事件中，event對象包含與創建它的事件有關的屬性和方法，觸發的事件不一樣可用的屬性和方法也不一樣，此處羅列三個不一樣的地方，    

　　獲得事件源  　　W3C: target      IE8: srcElement  IE11和Chrome兩種方法都支持    

    window.onload = function(){
        var input = document.getElementsByTagName("input")[0];
        input.onclick = function(event){
            getSrc(event);    //去調用另外一個函數，
        }
    }
    
    function getSrc(event){
        var e = event || window.event;
        alert(e.target);    //HTMLInputElement
        alert(e.target.tarName);    //INPUT    
        alert(e.srcElement);        //HTMLIntElement    Firefox:null
        alert(typeof e.srcElement);        //Firefox: undefiend
    }

　　做瀏覽器的兼容

    function getSrc(event){  2         var e = event || window.event;  3         if(event){  4             return e.target;  5  }  6         if(window.event){  7             return e.srcElement;  8  }  9  } 10     //因為 typeof e.target 返回的是undefined，故等價於 return e.target || e.srcElement;

 

　　取消事件冒泡

    
//事件冒泡
window.onload=function(){
        document.onclick=function(event){
            alert("document");
        }
        //document.getElementsByTagName("html")[0].onclick=function(event){
        document.documentElement.onclick = function(event){
            alert("html");
        }
        document.body.onclick=function(event){
            alert("body");
        }
        document.getElementById('box').onclick = function () {
            alert('div');
        };

        document.getElementsByTagName("input")[0].onclick=function(event){
            alert("input");
        }    
    }
    
    //上面的代碼中，如果在按鈕input上面進行點擊，那么上面五個點擊事件都會被觸發，這就是冒泡
    
    //IE和W3C取消冒泡的方式不一樣，同樣是IE8和Firefox之間的區別，IE11和Chrome兩種方法都支持
    //如果只是希望在input上面執行單擊事件，那么將最后一個單擊事件函數改一改
    //W3C  
    document.getElementsByTagName("input")[0].onclick=function(event){
            alert("input");
            if(event.bubbles){        //也可以不用判斷。直接取消
                event.stopPropagation();
            }
        }    
        
    //IE8
    document.getElementsByTagName("input")[0].onclick=function(){
            alert("input");
            var e = window.event;
            e.cancelBubble = true;
        }

　　做瀏覽器的兼容

    document.getElementsByTagName("input")[0].onclick=function(event){ 3             alert("input"); 4             var e = event || window.event; 5             window.event ? e.cancelBubble : e.stopPropagation(); 6             //(typeof e.stopPropagation == 'function')?e.stopPropagation:e.cancelBubble=true;
        }

 

　　阻止默認事件發生，比如頁面上有一個超鏈接元素 <a href="http://www.baidu.com">百度</a>

//比如頁面上有一個超鏈接元素 <a href="http://www.baidu.com">百度</a>
    window.onload=function(){
        var a = document.getElementsByTagName("a")[0];
        a.onclick = function(){
            alert("a");
        }
    }
    //在點擊了這個a標簽后，先打印出字符 a 然后會自動的跳轉到百度頁面，而這個跳轉就是默認行為

 

//W3C            IE11 Chrome都支持
    window.onload=function(){
        var a = document.getElementsByTagName("a")[0];
        a.onclick = function(event){
            alert("a");
            if(cancelable){    //如果為真，表示可以取消默認行為，也可以不進行此判斷，直接取消
                event.preventDefault();
            }
        }
    }
    
    //IE8        IE11已經不支持了，但是Chrome還是支持
    window.onload=function(){
        var a = document.getElementsByTagName("a")[0];
        a.onclick = function(){
            var e = window.event;
            alert("a");
            e.returnValue = false;    //默認為true
        }
    }
    

　　　　做瀏覽器的兼容，新版本的IE已經不支持舊版本的方法

    //做兼容
    window.onload=function(){ 3         var a = document.getElementsByTagName("a")[0]; 4         a.onclick = function(event){ 5             alert("a"); 6             var e = event || window.event; 7             typeof e.preventDefault == "function" ? e.preventDefault() : e.returnValue = false; 8  } 9     }