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

DOM level0不支持捕獲事件的。

DOM0：將要添加的事件處理程序直接賦給該對象的事件處理程序?qū)傩浴?/p>

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

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

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

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

    
        

            s2s2s2s2
        
         
     

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

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

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

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

    
111
    
222
    
333
    
444

很簡單的代碼，現(xiàn)在分析一下DOM是怎么執(zhí)行的，首先找到ul,然后遍歷li，點擊li的時候，找到目標(biāo)li的位置，執(zhí)行點擊事件，這樣每次點擊都要找一次 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做事件處理，當(dāng)li被點擊時，由于冒泡原理，事件就會冒泡到ul上，因為ul上有點擊事件，所以事件就會觸發(fā)，當(dāng)然，這里當(dāng)點擊ul的時候，也是會觸發(fā)的，所以我們在上面加了一個判斷，event 對象提供了一個屬性target,可以返回事件的目標(biāo)節(jié)點，也就是說，target就可以表示為當(dāng)前的事件操作的DOM，但是不是真正操作DOM。

點擊li會觸發(fā)事件了，且每次只執(zhí)行一次dom操作，如果li數(shù)量很多的話，將大大減少dom的操作，優(yōu)化的性能可想而知！

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

在項目中我們的DOM有時候是動態(tài)生成的，我們現(xiàn)在使用方法一，

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

HTML事件處理程序中的event:


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

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



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

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



主要優(yōu)點是可以為同一個對象的同一個事件綁定多個事件處理程序。并且注冊的多個事件是按順序執(zhí)行的；
通過addEventListener添加的事件處理程序必須通過removeEventListener刪除，且參數(shù)一致。
那么我們在上面代碼基礎(chǔ)上添加移除事件：
s1.removeEventListener("click",function(){
    console.log("取消點擊事件");
},false);
再次點擊還是顯示：
第一個點擊事件!
第二個點擊事件!
并未去掉點擊事件顯示‘取消點擊事件’，這又是怎么回事？？？
是因為：通過addEventListener添加的匿名函數(shù)將無法刪除
修改代碼：
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及以下的瀏覽器實現(xiàn)了類似的添加移除方法：attachEvent()和detachEvent()。
這兩個方法都需要兩個參數(shù)：事件處理程序名稱和事件處理程序函數(shù)。注意是事件處理名稱，所以需要加‘on’，由于IE8及以下版本的瀏覽器只支持事件冒泡，所以通過attachEvent()添加的事件處理程序都是冒泡事件。
s1.attachEvent("onclick",function(){
   alert("第一個點擊事件!");
});
s1.attachEvent("onclick",function(){
    alert("第二個點擊事件!");
});
IE8及以下彈出的是：
第二個點擊事件!
第一個點擊事件!
detachEvent刪除事件和removeEventListener刪除事件一樣，添加的匿名函數(shù)無法刪除。
跨瀏覽器的事件處理程序
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...