摘要：事件通常與函數配合使用，當事件發生時函數才會執行。的事件流是事件捕獲流，事件由根元素獲取并沿樹向下分發。通過添加事件，只能用刪除此事件。這主要得益于瀏覽器的事件冒泡機制。

事件是可以被 JavaScript 偵測到的行為。

網頁中的每個元素都可以產生某些可以觸發 JavaScript 函數或程序的事件。

事件通常與函數配合使用，當事件發生時函數才會執行。

執行JS 事件的方式：

HTML 事件屬性可以直接執行 JavaScript 代碼

HTML 事件屬性可以調用 JavaScript 函數

你可以為 HTML 元素指定自己的事件處理程序

你可以阻止事件的發生。

等等 ...

事件流描述的是從頁面中接受事件的順序。

IE 的事件流是事件冒泡流，事件由子元素獲取并沿DOM樹向上傳播。即事件最開始由最具體的元素(文檔中嵌套層次最深的那個節點)接收，然后逐級向上轉播至最不具體的節點(document)，用 stopPropagation() 方法終止冒泡。

Netscape 的事件流是事件捕獲流，事件由根元素獲取并沿DOM樹向下分發。與事件冒泡流相反，事件捕獲的思想是不太具體的節點(document)應該更早接收到事件，而最具體的節點最后接收到事件。已經不適用了

HTML DOM Event 對象

IE 中的 Event 對象

HTML 事件處理程序

事件直接寫在html的元素里面，缺點：html和js代碼緊密的耦合在一起。

測試

0級 DOM事件處理程序

把一個函數賦值給一個事件的處理程序屬性，優點：比較簡單，跨瀏覽器支持。缺點：不能添加多個事件處理程序，最后一個事件會覆蓋前面的事件

document.getElementById("id").onclick = function () {
    alert(1);
}

2級 DOM事件處理程序

通過 addeventlistener() 添加事件，只能用 removeEventlistener() 刪除此事件。它們都接收三個參數：要處理的事件名event（不加"on"）、作為事件處理程序的函數function（優點：可以添加多個事件處理程序，）和一個布爾值useCapture。布爾參數僅僅在現代瀏覽器最近的幾個版本中是可加可不加的，并且true代表該事件在捕獲階段執行，false代表在冒泡階段執行，建議寫false，因為有些瀏覽器只有冒泡階段。

target.addEventListener(type, listener[, useCapture]);
target.removeEventListener(type, listener[, useCapture]);

IE 事件處理程序

IE8 及更早IE版本不支持 addEventListener() 方法，Opera 7.0 及 Opera 更早版本也不支持。 但是，對于這些不支持該函數的瀏覽器，你可以使用 attachEvent() 方法來添加事件句柄。通過 attachEvent() 添加事件，只能用 detachEvent() 刪除此事件。這兩個方法接收相同的兩個參數：事件處理程序名稱 type 與事件處理函數 function，不支持第三個參數的原因：IE8--只支持冒泡冒泡流。

element.attachEvent(type, function)
element.detachEvent(type, function)

當我們需要對很多元素添加事件的時候，可以通過將事件添加到它們的父節點而將事件委托給父節點來觸發處理函數。這主要得益于瀏覽器的事件冒泡機制。

    
Lorem ipsum dolor sit amet.
    
Lorem ipsum dolor sit amet.
    
Lorem ipsum dolor sit amet.

/*
 * @Author: bxm09
 * @Date:   2017-03-24 15:51:37
 * @Last Modified by:   bxm09
 * @Last Modified time: 2017-07-24 13:16:04
 * @Desc 跨瀏覽器兼容的事件處理程序（能力檢測）
 */

var eventshiv = {
    // event兼容
    getEvent: function(event) {
        return event ? event : window.event;
    },

    // type兼容
    getType: function(event) {
        return event.type;
    },

    // target兼容
    getTarget: function(event) {
        return event.target ? event.target : event.srcelem;
    },

    /**
     * 添加事件句柄
     * 2級 DOM -> IE -> 0級 DOM
     */
    addHandler: function(elem, type, listener) {
        if (elem.addEventListener) {
            elem.addEventListener(type, listener, false);
        } else if (elem.attachEvent) {
            elem.attachEvent("on" + type, listener);
        } else {
            // 在這里由于.與"on"字符串不能鏈接，只能用 []
            elem["on" + type] = listener;
        }
    },

    // 移除事件句柄
    removeHandler: function(elem, type, listener) {
        if (elem.removeEventListener) {
            elem.removeEventListener(type, listener, false);
        } else if (elem.detachEvent) {
            elem.detachEvent("on" + type, listener);
        } else {
            elem["on" + type] = null;
        }
    },

    /**
     * 添加事件代理
     */
    addAgent: function (elem, type, agent, listener) {
        elem.addEventListener(type, function (e) {
            if (e.target.matches(agent)) {
                listener.call(e.target, e); // this 指向 e.target
            }
        });
    },

    /**
     * 取消默認行為
     * 非IE -> IE
     */
    preventDefault: function(event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },

    /**
     * 阻止事件冒泡
     * 非IE -> IE
     */
    stopPropagation: function(event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
};

console.log("eventshiv.js 文件加載成功！");