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

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

網(wǎng)頁中的每個元素都可以產(chǎn)生某些可以觸發(fā) JavaScript 函數(shù)或程序的事件。

事件通常與函數(shù)配合使用，當(dāng)事件發(fā)生時函數(shù)才會執(zhí)行。

執(zhí)行JS 事件的方式：

HTML 事件屬性可以直接執(zhí)行 JavaScript 代碼

HTML 事件屬性可以調(diào)用 JavaScript 函數(shù)

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

你可以阻止事件的發(fā)生。

等等 ...

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

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

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

HTML DOM Event 對象

IE 中的 Event 對象

HTML 事件處理程序

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

測試

0級 DOM事件處理程序

把一個函數(shù)賦值給一個事件的處理程序?qū)傩?，?yōu)點：比較簡單，跨瀏覽器支持。缺點：不能添加多個事件處理程序，最后一個事件會覆蓋前面的事件

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

2級 DOM事件處理程序

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

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

IE 事件處理程序

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

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

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

    
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 文件加載成功！");