摘要：基本操作事件兼容性寫在前面在開發過程中，我們會經常的遇到各種事件監聽以及事件處理的情況。然而在曙光來臨之前，仍然需要對那些不支持級事件處理程序的瀏覽器進行兼容性處理。

在WEB開發過程中，我們會經常的遇到各種事件監聽以及事件處理的情況。

事件（Event）即為用戶的動作，例如：用戶點擊鼠標，產生onclick事件；按下鍵盤，產生onkeyDown事件；改變輸入框的值，產生onchange事件...

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

    點擊我將獲得節點1
    點擊我將獲得節點2

當在元素上點擊時，彈出警告框，內容為點擊我將獲得節點。這里函數傳入的參數e，就是事件。瀏覽器會實時的根據用戶點擊的a標簽的不同返回不同的節點內容。

這種做法在FireFox、Chrome、Safari等遵循W3C規范的瀏覽器下是沒有問題的，唯獨在IE(暫時僅限于8.0以下版本)下是行不通的，IE采用了一種非標準的方式，并不是將事件作為函數參數傳入，而是將事件作為window對象的event屬性：window.event傳遞進去的；而且，IE使用的是event.srcEvent來獲取目標事件...

既然IE8以下不行，那有什么方法解決這個問題尼？
上面其實涉及到JS事件的兼容性問題，下面我們將從事件處理的角度來慢慢的分析這個問題。

當然，還是老話，所有的方法都來自網上，學到了才是自己的！！

然后，寫在前面，帶上我們可愛的小伙伴。廢話不多說，下面我們開始看起吧！

文章主要是對js的this進行簡單的說明和介紹，順帶會添加一些代碼，沒辦法，語言能力有限，說明不了的只能直接上代碼了。

IE瀏覽器從IE9開始已經支持DOM2事件處理程序，但是對于老版本的ie瀏覽器，任然使用attachEvent方式來為dom元素添加事件。值得慶幸的是微軟已宣布2016年將不再對ie8進行維護，對于廣大前端開發者無疑是一個福音。然而在曙光來臨之前，仍然需要對那些不支持DOM2級事件處理程序的瀏覽器進行兼容性處理。
嘛，下面，將慢慢的處理事件在常規情況下(額，就是W3C和IE)的處理方式。

借鑒GitHub上markyun寫的事件偵聽器函數實現。下面我只是做一些注釋性說明

// event(事件)工具集，來源：https://github.com/markyun
markyun.Event = {
    // 頁面加載完成后
    // 主要是原生JS，頁面只能加載一次window.onload；這里使用該方法可以綁定多個方法。
    readyEvent : function(fn) {
        if (fn==null) {
            fn=document;
        }
        var oldonload = window.onload;
        if (typeof window.onload != "function") {
            window.onload = fn;
        } else {
            window.onload = function() {
                oldonload();
                fn();
            };
        }
    },
    // 視能力分別使用dom0||dom2||IE方式 來綁定事件
    // 下面的順序：標準dom2，IE dom2， dom
    // 參數： 操作的元素,事件名稱 ,事件處理程序
    addEvent : function(element, type, handler) {
        if (element.addEventListener) {
            //事件類型、需要執行的函數、是否捕捉
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, function() {
                handler.call(element);
            });
        } else {
            element["on" + type] = handler;
        }
    },
    // 移除事件
    removeEvent : function(element, type, handler) {
        if (element.removeEnentListener) {
            element.removeEnentListener(type, handler, false);
        } else if (element.datachEvent) {
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    }, 
    // 阻止事件 (主要是事件冒泡，因為IE不支持事件捕獲)
    stopPropagation : function(ev) {
        if (ev.stopPropagation) {
            ev.stopPropagation();// 標準w3c
        } else {
            ev.cancelBubble = true;// IE
        }
    },
    // 取消事件的默認行為
    preventDefault : function(event) {
        if (event.preventDefault) {
            event.preventDefault();// 標準w3c
        } else {
            event.returnValue = false;// IE
        }
    },
    // 獲取事件目標
    getTarget : function(event) {
        // 標準W3C 和 IE
        return event.target || event.srcElement;
    },
    // 獲取event對象的引用，取到事件的所有信息，確保隨時能使用event；
    getEvent : function(e) {
        var ev = e || window.event;
        if (!ev) {
            var c = this.getEvent.caller;
            while (c) {
                ev = c.arguments[0];
                if (ev && Event == ev.constructor) {
                    break;
                }
                c = c.caller;
            }
        }
        return ev;
    }
}; 

IE下的事件特例

IE下的事件對象是在window下的，而標準應該作為一個參數, 傳為函數第一個參數;  
IE的事件對象定義的屬性跟標準的不同，如：

cancelBubble 默認為false, 如果為true就是取消事件冒泡;
returnValue 默認是true，如果為false就取消默認事件;
srcElement, 這個指的是標準W3C下的獲取事件目標target,Firefox下的也是srcElement;

以上的所有方法，都來自網上。

所有的方法，都必須腳踏實地，在具體應用場景下去分析、去選擇，我們應該按照具體的情況，來選擇方法。

因為瀏覽器的多樣性，前端的應用場景經常很復雜，性能優化充滿挑戰，也充滿機遇。

學會了才是自己的，知道會用會寫，才是我們最終的目標。

javascript秘密花園

markyun