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

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

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

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

在W3C規范中：分三步（1、事件捕獲；2、事件觸發；3、事件冒泡）；
在IE中：分兩步（1、事件冒泡；2、事件觸發）
在網景（Netscape)：分兩步（1、事件捕獲；2、事件觸發）

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

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

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

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

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

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

優點：簡單，具有跨瀏覽器的優勢

特點：使用DOM 0級方法指定事件處理程序被認為是元素的方法，因此這個時候事件處理是在元素的作用域中進行運行，程序中的this指向當前元素。 來看下面一段代碼：

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

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

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

添加事件操作
如下代碼：

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

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

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

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

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

重寫這個函數如下：

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

－－－－－－－－－－－－－－－－－ 珍愛生命，遠離IE －－－－－－－－－－－－－－－－－－

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

如下代碼：

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

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

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

且看下面代碼：

    var EventUtil = {
        //@handler是裝載匿名函數的引用變量，里面裝載的是具體要執行的函數邏輯
        //@element是目標元素
        //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("你又點我了?。?！");
};

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

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

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

這次沒有源代碼，以上～