但是，注意上述描述的是DOM2級事件流的原理，也就是說不是所有的JS的事件流都是根據上圖所示的過程推進的。

DOM level0不支持捕獲事件的。

DOM0：將要添加的事件處理程序直接賦給該對象的事件處理程序屬性。

使用IE8，firefox，chrome瀏覽器測試：

點擊按鈕彈出：‘DOM0點擊事件 2’ 和 ‘wrapper 點擊事件‘；
點擊div彈出：‘wrapper 點擊事件’；

從運行結果可以得出以下結論：
1、在DOM Level 0中的只能一個元素只能綁定一個事件，多個事件，后面的會覆蓋掉前面的事件。
2、DOM Level 0不會阻止事件冒泡的發生，但是不支持事件捕獲。
2、所有瀏覽器均支持。

DOM2級事件定義了兩個方法，addEventListener()方法和removeEventListener()方法來處理和刪除事件處理程序，當然，這個是標準的。
它們可以接收三個參數，
第一個參數：要處理的事件名，是一個字符串，但是要記得不要加“on”作為前綴，
第二個參數：作為事件處理的函數，
第三個參數：一個布爾值，這個布爾值為true時，那就在事件捕獲階段調用事件處理程序，如果是false那就在冒泡階段調用事件處理程序。

    
        

            s2s2s2s2
        
         
     

使用chrome瀏覽器測試，彈出內容：
s1 捕獲模式下
s2 捕獲模式下
s2 冒泡模式下
s1 冒泡模式下

由此可以看出：
1、DOM Level 2可以在一個元素上面注冊多個事件。
2、DOM Level 2支持事件捕獲也支持事件冒泡，但捕獲事件要比冒泡事件先觸發。

上面是用chrome測試的，現在我們用IE8測試一下，點擊了下，沒有任何彈層，IE8以下瀏覽器不支持addEventListener函數，

事件委托是冒泡型事件流的典型應用啊，什么是事件委托呢？也就是利用冒泡的原理，把事件加到父級上，觸發執行效果。
上一段代碼，方法一：

    
111
    
222
    
333
    
444

很簡單的代碼，現在分析一下DOM是怎么執行的，首先找到ul,然后遍歷li，點擊li的時候，找到目標li的位置，執行點擊事件，這樣每次點擊都要找一次 li 哦，那我們使用事件委托如何處理呢？
方法二：

(function(){
        var wrapper = document.getElementById("wrapper");
        wrapper.onclick=function(e){
            var e=e || window.event;
            var target= e.target || e.srcElement;
            if(target.nodeName.toLocaleLowerCase()==="li"){
                alert(target.getAttribute("url"));
            }
        }
 })();

用父級ul做事件處理，當li被點擊時，由于冒泡原理，事件就會冒泡到ul上，因為ul上有點擊事件，所以事件就會觸發，當然，這里當點擊ul的時候，也是會觸發的，所以我們在上面加了一個判斷，event 對象提供了一個屬性target,可以返回事件的目標節點，也就是說，target就可以表示為當前的事件操作的DOM，但是不是真正操作DOM。

點擊li會觸發事件了，且每次只執行一次dom操作，如果li數量很多的話，將大大減少dom的操作，優化的性能可想而知！

總結一：使用事件委托可以提高性能。

在項目中我們的DOM有時候是動態生成的，我們現在使用方法一，

(function(){
        var wrapper = document.getElementById("wrapper");
        var lists = wrapper.getElementsByTagName("li");
        
        for(var i=0;i
你會發現，新增的li 是沒有事件的，說明添加子節點的時候，事件沒有一起添加進去的，這要怎么辦呢？
解決問題方法是使用事件代理機制，當事件被拋到更上層的父節點的時候，我們通過檢查事件的目標對象（target）來判斷并獲取事件源Li。
總結二：使用事件委托新添加的元素還會有之前的事件。
事件對象event
在觸發某個事件時，會產生一個事件對象event。事件對象的作用是用來記錄事件發生是一些相關的信息，注意事件對象只有在事件發生時才會產生，我們無法手動創建，event對象只有在事件處理程序執行期間，才會存在，執行完畢即銷毀。
所有瀏覽器都支持event對象，event對象會傳入DOM0級，DOM2級，HTML指定，的事件處理程序中，但支持的方式不同，所以也會涉及跨瀏覽器的部分。
DOM中的事件對象：
IE中將Event視作window對象屬性，NetScape直接看做Event對象；瀏覽器兼容方法：
var e = event || window.event;

HTML事件處理程序中的event:


事件對象重要屬性和方法
event對象包含與創建它的特定事件有關的屬性和方法。觸發的事件類型不一樣，可用的屬性和方法也不一樣。不過所有事件都會包括下表列出的成員：
type： 事件的類型，如onlick中的click；
IE屬性-> srcElement,標準屬性－>target： 觸發事件的元素
更多事件屬性和方法：http://www.w3school.com.cn/js...
事件處理程序
HTML事件處理程序
點擊

DOM0級事件處理程序
獲取對這個元素DOM對象的引用，用DOM的getElementById()等這種方式獲取到對這個元素對象的引用，然后就是每個事件都在這個對象上用相應的屬性，例如click事件，那么這個對象就有一個onclick屬性與之對應，那你在這個對象的屬性上綁定事件處理程序。



顯示內容：第二個點擊事件!
DOM0中每個事件元素目標對于每個事件類型只能最多注冊一個事件處理程序，若注冊多個后面的會覆蓋前面的，前面這個注冊程序就不會執行了。
刪除這個事件處理程序:
s1.onclick=null; 

DOM2級事件處理程序
DOM2級事件定義了兩個方法，addEventListener()方法和removeEventListener()方法來處理和刪除事件處理程序。
它們可以接收三個參數，第一個參數：要處理的事件名，是一個字符串，但是要記得不要加“on”作為前綴，第二個參數：作為事件處理的函數，第三個參數：一個布爾值，這個布爾值為true時，那就在事件捕獲階段調用事件處理程序，如果是false那就在冒泡階段調用事件處理程序。



主要優點是可以為同一個對象的同一個事件綁定多個事件處理程序。并且注冊的多個事件是按順序執行的；
通過addEventListener添加的事件處理程序必須通過removeEventListener刪除，且參數一致。
那么我們在上面代碼基礎上添加移除事件：
s1.removeEventListener("click",function(){
    console.log("取消點擊事件");
},false);
再次點擊還是顯示：
第一個點擊事件!
第二個點擊事件!
并未去掉點擊事件顯示‘取消點擊事件’，這又是怎么回事？？？
是因為：通過addEventListener添加的匿名函數將無法刪除
修改代碼：
function firstClick(){
    console.log("第一個點擊事件!");
}
function secClick(){
     console.log("第二個點擊事件!")
}
s1.addEventListener("click",firstClick,false);
s1.addEventListener("click",secClick,false);
s1.removeEventListener("click",secClick,false);
輸出：第一個點擊事件!
但是，這兩個方法不支持除IE8及以下的其他版本的所有瀏覽器，那IE事件處理程序又改如何寫呢？？？
IE事件處理程序
IE8及以下的瀏覽器實現了類似的添加移除方法：attachEvent()和detachEvent()。
這兩個方法都需要兩個參數：事件處理程序名稱和事件處理程序函數。注意是事件處理名稱，所以需要加‘on’，由于IE8及以下版本的瀏覽器只支持事件冒泡，所以通過attachEvent()添加的事件處理程序都是冒泡事件。
s1.attachEvent("onclick",function(){
   alert("第一個點擊事件!");
});
s1.attachEvent("onclick",function(){
    alert("第二個點擊事件!");
});
IE8及以下彈出的是：
第二個點擊事件!
第一個點擊事件!
detachEvent刪除事件和removeEventListener刪除事件一樣，添加的匿名函數無法刪除。
跨瀏覽器的事件處理程序
var eventUtil={
    addEvent:function(el,type,handler){
         if(el.addEventListener){
              el.addEventListener(type,handler,false);
         }else if(el.attachEvent){
              el.attachEvent("on"+type,handler)
         }else {
               element["on"+type]=handler;
          }
       },
    removeEvent:function(el,type,handler){
          if(el.removeEventListener){
               el.removeEventListener(type,handler,false)
          }else if(el.detachEvent){
               el.detach("on"+type,handler)
          }else {
               el["on"+type]=null;
          }
     }
  }

參考的文檔：
http://www.jb51.net/article/7...
http://blog.csdn.net/jsdcheny...
http://www.cnblogs.com/todayh...