摘要：三級事件處理程序級事件定義了兩個方法，分別用于處理指定和刪除事件處理程序的操作和，他們都接收三個參數(shù)要處理的事件名作為事件處理程序的函數(shù)一個布爾值。布爾值如果是表示在捕獲階段調(diào)用事件處理程序，如果是表示在冒泡階段調(diào)用事件處理程序。

前言：擼完CSS－DOM緊接著來擼DOM事件，事件總結(jié)完成后我要開始總結(jié)動畫，然后用純JS實(shí)現(xiàn)一個輪播圖，前路漫漫，還有各種框架等著我～～～
本篇主要內(nèi)容有：事件流 事件處理程序 跨瀏覽器事件處理程序

－－－－－－－－－－－－－－－－－－－－? 分割線－－－－－－－－－－－－－－－－－－－－－

事件冒泡：事件開始時由最具體的元素（文檔嵌套層次最深的節(jié)點(diǎn)）接收，然后逐級向上傳播到較為不具體的節(jié)點(diǎn)。
事件捕獲：不太具體的節(jié)點(diǎn)應(yīng)該更早接收到事件，最具體的節(jié)點(diǎn)應(yīng)該最后接收到事件。

在W3C規(guī)范中：分三步（1、事件捕獲；2、事件觸發(fā)；3、事件冒泡）；
在IE中：分兩步（1、事件冒泡；2、事件觸發(fā)）
在網(wǎng)景（Netscape)：分兩步（1、事件捕獲；2、事件觸發(fā)）

這個在《DOM編程藝術(shù)》中初步實(shí)現(xiàn)的圖片庫的總結(jié)（一）就有了運(yùn)用，它的js代碼嵌套在HTML中，如：想要實(shí)現(xiàn)在點(diǎn)擊按鈕時顯示一個警告框，則可以這么寫：

缺點(diǎn)：
1.代碼例子中的alert可以換成自己定義的函數(shù)，假如用戶在頁面加載后還沒開始解析這個函數(shù)時就單擊了按鈕，這個時候就會引發(fā)錯誤，這時可以將事件處理程序封裝在try－catch塊中，上面的代碼可以改為：

2.HTML和js代碼耦合性太強(qiáng)，如果要更換事件處理程序，就要改動兩個地方。

每個元素（包括window和document）都有自己的事件處理程序?qū)傩?，例如onclick，將這種屬性值設(shè)置為一個函數(shù)，就可以指定事件處理程序，如下方代碼：

    //假如有一個按鈕，先獲取這個按鈕元素
    var btn = document.getElementById("myBtn");
    btn.onclick = function(){
        alert("你點(diǎn)我干啥?。?！");
    };

注意：以上代碼在運(yùn)行之前不會指定事件處理程序，換句話說就是如果這些代碼插入在html文檔中的最后，位于按鈕之后，body標(biāo)簽之前，那么在文檔解析這個函數(shù)之前，點(diǎn)擊按鈕時無效的。

優(yōu)點(diǎn)：簡單，具有跨瀏覽器的優(yōu)勢

特點(diǎn)：使用DOM 0級方法指定事件處理程序被認(rèn)為是元素的方法，因此這個時候事件處理是在元素的作用域中進(jìn)行運(yùn)行，程序中的this指向當(dāng)前元素。 來看下面一段代碼：

    var btn = document.getElementById("mybtn");
    btn.onclick = function(){
        alert(this.id);   //this代表當(dāng)前執(zhí)行操作的元素btn，也就是id為mybtn的按鈕
    }

以上不僅僅可以訪問元素的id屬性，元素的任何屬性和方法都可以通過this訪問。以這種方式添加的事件處理程序會在事件流的冒泡階段被處理。

DOM 2級事件定義了兩個方法，分別用于處理指定和刪除事件處理程序的操作：
addEventListener()和removeEventListener()，
他們都接收三個參數(shù)：要處理的事件名、作為事件處理程序的函數(shù)、一個布爾值。
布爾值如果是true表示在捕獲階段調(diào)用事件處理程序，如果是false表示在冒泡階段調(diào)用事件處理程序。

添加事件操作
如下代碼：

    var btn = document.getElementById("myBtn");
    btn.addEventListener("click",function(){
        alert(this.id);
    },false);
    btn.addEventListener("click",function(){
        alert("你點(diǎn)我干啥?。?！");
    },false);

以上代碼為一個按鈕添加了一個onclick事件處理程序，注意里面參數(shù)傳遞的是"click"，這個是跟DOM中的事件類型有關(guān)，后續(xù)再說?！?br>并且使用DOM 2級方法添加事件處理程序的好處是，可以添加多個事件處理程序，上面例子中首先會顯示元素id，然后顯示"你點(diǎn)我干啥?。。?。

刪除事件操作
通過addEventListener()添加的事件處理程序只能使用removeEventListener()來移除，移除時傳入的參數(shù)與添加程序時使用的參數(shù)相同。這也就意味著通過addEventListener()添加的匿名函數(shù)將無法移除。如上面的例子，我增加以下代碼將無法移除事件：

    btn.removeEventListener("click",function(){
        alert(this.id);
    },false);

解決辦法是，將上面的匿名函數(shù)賦值給一個變量，然后affffdEventListener和 removeEventListener
傳參數(shù)時傳入這個變量就可以了。

重寫這個函數(shù)如下：

    var btn = document.getElementById("myBtn");
    var handler = function(){
        alert(this.id);
    };
    btn.addEventListener("click",handler,false);
    btn.addEventListener("click",handler,false);

－－－－－－－－－－－－－－－－－ 珍愛生命，遠(yuǎn)離IE －－－－－－－－－－－－－－－－－－

IE也實(shí)現(xiàn)了DOM中的類似的兩個方法：attachEvent()?和detachEvent()，這兩個方法接受相同的兩個參數(shù)，事件處理程序名稱與事件處理程序函數(shù)。

如下代碼：

    var btn = document.getElementById("mybtn");
    btn.attachEvent("onclick",function(){       //你沒看錯，用的“onclick”！??！
        alert("你又點(diǎn)我了?。?！");
    });

注意：
1.attachEvent()的第一個參數(shù)時“onclick”
2.使用attachEvent()，事件處理程序會在全局作用域中進(jìn)行，因此this===window
3.添加多個事件時，事件處理程序不是以添加它們的順序執(zhí)行，而是以相反的順序被觸發(fā)。
4.使用detachEvent()來移除時，匿名函數(shù)同樣不能移除，因此需要傳遞給函數(shù)相同的引用。

那么重點(diǎn)來了，可以封裝一個對象解決跨瀏覽器進(jìn)行事件處理，給這個對象起名叫：EventUtil，它有兩個方法，分別進(jìn)行事件添加和移除。

且看下面代碼：

    var EventUtil = {
        //@handler是裝載匿名函數(shù)的引用變量，里面裝載的是具體要執(zhí)行的函數(shù)邏輯
        //@element是目標(biāo)元素
        //type代表的是DOM 2級的事件類型，因此在用IE或者DOM 0級前面要加“on”
    
        addHandler: function (element, type, handler) {
            if (element.addEventListener) {
                element.addEventListener(type, handler, false);
            } else if (element.attachEvent) {
                element.attachEvent("on" + type, handler);
            } else {
                elemet["on" + type] = handler;  //如果上面兩種都不行，就使用DOM 0級方法處理，直接在元素上添加onclick事件
            }
        },
    
        removeHandler: function (element, type, handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler, false);
            } else if (element.detachEvent) {
                element.detachEvent("on" + type, handler);
            } else {
                element["on" + type] = null;  ////如果上面兩種都不行，就使用DOM 0級方法處理，直接賦值為null取消事件
            }
        }
    };

定義好了，怎么使用呢？看下面～～～

var btn = document.getElementById("myBtn");
var handler = function(){
    alert("你又點(diǎn)我了！?。?);
};

//添加事件
EventUtil.addHandler(btn,"click",handler);

//移除事件
EventUtil.removeHandler(btn,"click",handler);

以上代碼并沒有考慮IE中的作用域問題，并且DOM 0級只支持一個事件處理程序，但也不是什么問題，如今只賣早餐的飯店不多了～～～

這次沒有源代碼，以上～