js中事件對象event的兼容性問題

W3C標準規定，事件是作爲函數的參數傳入的，例如：

<p id="demo">點擊我將獲得屏幕座標</p>
document.getElementById("demo").onclick=function(e){
    alert(e.screenX);
}

當在元素上點擊時，彈出警告框，內容爲鼠標在屏幕上的橫座標。這裏函數傳入的參數e，就是事件，瀏覽器會實時跟蹤用戶的行爲，如e.screenX、e.screenY、e.offsetX、e.offsetY…

這種做法在FireFox、Chrome、Safari等遵循W3C規範的瀏覽器下是沒有問題的，唯獨在IE下是行不通的，
IE採用了一種非標準的方式，將事件作爲window對象的event屬性：window.event、window.event.screenX…

所以，我們在寫代碼的時候要照顧到IE，做好事件的兼容。

下面給出的一個兼容寫法，該示例並沒有去判斷瀏覽器，僅僅使用了一個小技巧。

<p id="demo">點擊我將獲得屏幕座標</p>
document.getElementById("demo").onclick=function(e){
    var e=e||event;
    alert(e.screenX);
}

注意：不要將var e=e||event; 寫成 var e=event||e; ，這在FireFox下會提示錯誤，FireFox無法處理未聲明未賦值的變量event。

這裏大家可能有疑慮，爲什麼是var e=e||event; ，爲什麼是 或運算（||），這樣的結果只能是e=true或者e=false？

或運算（||）返回的並不只是true或者false，而是返回第一個不爲false的變量的值，例如：
var a=5||6; //a=5
var b=0||5; //b=5
var c=false||”www.itxueyuan.com”; //c=”www.itxueyuan.com”
var e=e||event; //e爲用戶事件
與運算（&&）返回第一個不爲true的變量的值；
在處理瀏覽器兼容問題的時候，儘量不要去判斷瀏覽器，那將會爲向後兼容帶來風險，或許某個升級的版本開始遵循W3C標準，我們之前寫的代碼在該版本上就會產生錯誤，得不到預想結果。

例如，某個升級的IE版本支持將事件作爲函數參數傳入，拋棄了將事件作爲window的屬性，而我們的代碼，恰恰是這個樣子的：

if((/ie/i).test(navigator.userAgent)){
    document.getElementById("demo").onclick=function(){
        alert(window.event.screenX);
    }
}else {
    document.getElementById("demo").onclick = function (e) {
        alert(e.screenX);
    }
}

總結：

//IE是把event事件對象作爲全局對象window的一個屬性；可以使用event或window.event來訪問；
//FireFox和Chrome等主流瀏覽器是通過把【事件對象】作爲【事件響應函數】的【參數】進入傳入的；
//兼容性的寫法示例：
domElement.onclick = function( e ){
      e = e || window.event;//或（||）書寫順序有講究，不能隨意換
}