DOM事件，就是瀏覽器或用戶針對頁面可以做出的某種動作，我們稱這些動作為DOM事件。它是用戶和頁面交互的核心。當動作發生（事件觸發）時，我們可以為其綁定一個或多個事件處理程式（函數），來完成我們想要實現的功能。 為了方便理解下麵即將要講解的內容，在正式開始之前，讓我們先來瞭解一個最常用的事件：cli ...
DOM事件，就是瀏覽器或用戶針對頁面可以做出的某種動作，我們稱這些動作為DOM事件。它是用戶和頁面交互的核心。當動作發生（事件觸發）時，我們可以為其綁定一個或多個事件處理程式（函數），來完成我們想要實現的功能。
為了方便理解下麵即將要講解的內容，在正式開始之前，讓我們先來瞭解一個最常用的事件：click，點擊事件：當我們用滑鼠點擊頁面時，如果我們為頁面綁定了事件處理程式，那麼這時該程式將被執行。
這裡先放一段HTML代碼片段供講解使用：
1 <head> 2 <style> 3 .wrapper{width:400px;height:400px;background-color:red} 4 .main{width:300px;height:300px;background-color:yellow} 5 .content{width:200px;height:200px;background-color:green} 6 </style> 7 </head> 8 <body> 9 <div class="wrapper"> 10 <div class="main"> 11 <div class="content"></div> 12 </div> 13 </div> 14 </body>
一 事件處理程式的綁定和解除
1， 句柄
綁定：element.on+事件類型（type） = function (e){};
同一事件類型只能綁定一個事件處理程式，無相容性問題。
1 var wrap = document.getElementsByClassName("wrapper")[0]; 2 wrap.onclick = function (){ 3 alert("wrapper"); 4 };//現在點擊紅色塊將會彈出提示框
解除：element.on+type = false/null/’’；
1 wrap.onclick = null; 2 //現在再點擊紅色塊將不會再彈出提示框了
2， 監聽
綁定：element.addEventListener(事件類型,fn,boolean)
W3C標準方法，同一事件類型可以綁定一個或多個事件處理程式，IE老版本不相容
1 wrap.addEventListener("click",test,false); 2 function test() { 3 alert("wrapper"); 4 } 5 //也可以在第二個參數的位置直接使用匿名函數
解除：element.removeEventListener(事件類型,fn,false)
wrap.removeEventListener("click",test,false);
//現在點擊將不會再彈出提示框了
另外：IE有個獨有的方法，obj.attchEvent(‘on’+type,fn),功能和監聽方式一樣。解除方式是：element.detachEvent(‘on’+type,fn)
註意，如果綁定的是匿名函數，則無法解除。
二 事件處理模型
1，事件捕獲和冒泡
事件的觸發其實分為兩個階段，捕獲階段和冒泡階段。我們既可以把事件處理函數綁定在事件捕獲階段，也可以綁定在冒泡階段。當某一事件被觸發時，先執行捕獲再執行冒泡。
事件捕獲：當父元素的某類型事件被觸發時，所有後代元素上綁定的同類型事件均會被層層觸發。
事件冒泡：當子元素的某類型事件被觸發時，所有父元素上綁定的同類型事件均會被層層觸發。
句柄方式綁定的事件都是在冒泡階段，監聽方式根據提供的第三個參數設置事件捕獲或冒泡：true則在捕獲階段，false則在冒泡階段。
1 var main = document.getElementsByClassName("main")[0]; 2 main.addEventListener("click",function(){ 3 alert("main"); 4 },false);
5 /*現在點擊綠色區域會先彈出main，點擊確認後再彈出wrapper。如果wrap和main綁定程式的第三個參數都是true，則會先彈出wrapper，後彈出main。
6 如果同一個元素在兩個階段都綁定了同一類型事件，則按照綁定的先後順序執行*/
2，阻止事件冒泡
有時候我們並不想讓綁定的事件層層向上傳遞，只想被點擊的那個元素執行相關任務，那麼我們就需要阻止事件冒泡：
1 main.addEventListener("click",function(e){ 2 alert("main"); 3 e.stopPropagation(); 4 //e.cancelBubble = true;IE的方法 5 },false);
3，阻止事件預設行為
諸如點擊submit類型的按鈕，頁面會提交表單、滑鼠右鍵頁面會出現右鍵菜單、點擊a標簽會跳轉頁面等等都是事件的預設行為，是瀏覽器預定義的處理程式，我們可以通過以下幾種方式阻止它們。
return false；句柄方式綁定的事件處理程式才能實現。
e.preventDefault();W3C標準方式。
e.returnValue = false;相容低版本IE瀏覽器。
1 document.oncontextmenu = function (e){ 2 e.preventDefault(); 3 alert("現在右鍵點擊不會出現菜單欄了")； 4 };
4，事件對象
每當有事件被觸發，瀏覽器都會記錄當前事件觸發的詳細信息，並把它們封裝成一個對象，傳遞給事件處理函數，IE瀏覽器有一點不同，它是把該對象存儲在window.event裡面，而不是直接傳遞給事件處理函數。
事件對象有兩個屬性：target或srcElement(IE)，它存儲的是事件源對象，即實際觸發該事件的對象。不是捕獲的，也不是冒泡的。通過事件源對象，可以輕鬆實現事件委托功能。
事件委托的功能是：當子元素個數很多或不確定，且每個子元素都需要綁定執行類似功能的事件處理函數時，通過在父元素上綁定該事件處理函數，在函數內部獲取事件源對象（某子元素），通過事件冒泡機制，確保能讓每個子元素在被觸發相應事件時，事件處理函數都能被正確執行。
1 /* 2 <ul> 3 <li>1</li> 4 <li>2</li> 5 <li>3</li> 6 <li>4</li> 7 <li>5</li> 8 <li>6</li> 9 <li>7</li> 10 。。。 11 </ul> 12 假如現在有這樣一個列表，數目很多，而且還會動態更新，我們要實現的功能是點擊每個li都彈出它自己的內容 13 */ 14 var ul = document.getElementsByTagName("ul")[0]; 15 ul.onclick = function (e){ 16 var ev = e || window.event; 17 target = ev.target || ev.srcElement; 18 alert(target.innerText); 19 }; 20 //這樣就可以很簡單的實現這個功能了，即使後面假如了新的li，點擊新的li依然可是彈出正確的內容
下一篇講詳細講解JavaScript中具體的DOM事件和他們的功能。
