一、事件
二、事件流
以上內容見：javaScript事件（一）事件流
三、事件處理程序
四、IE事件處理程序
五、事件對象
以上內容見javaScript事件（三）事件對象
六、事件對象的公共成員
1、DOM中的event的公共成員
event對象包含與創建它的特定事件有關的屬性和方法。觸發的事件類型不一樣，可用的屬性和方法不一樣。但是，DOM中所有事件都有以下公共成員。【注意bubbles屬性和cancelable屬性】
| 屬性/方法 | 類型 | 讀/寫 | 說明 |
| bubbles | Boolean | 只讀 | 表明事件是否冒泡 |
| stopPropagation() | Function | 只讀 | 取消事件的進一步捕獲或冒泡。如果bubbles為true,則可以使用這個方法 |
| stopImmediatePropagation() | Function | 只讀 | 取消事件的進一步捕獲或冒泡，同時阻止任何事件處理程序被調用（DOM3級事件中新增） |
| cancelable | Boolean | 只讀 | 表明是否可以取消事件的默認行為 |
| preventDefault() | Function | 只讀 | 取消事件的默認行為。如果cancelable是true，則可以使用這個方法 |
| defaultPrevented | Boolean | 只讀 | 為true表示已經調用了preventDefault()(DOM3級事件中新增) |
| currentTarget | Element | 只讀 | 其事件處理程序當前正在處理事件的那個元素（currentTarget始終===this,即處理事件的元素） |
| target | Element | 只讀 | 直接事件目標，真正觸發事件的目標 |
| detail | Integer | 只讀 | 與事件相關的細節信息 |
| eventPhase | Integer | 只讀 | 調用事件處理程序的階段：1表示捕獲階段，2表示處於目標階段，3表示冒泡階段 |
| trusted | Boolean | 只讀 | 為true表示事件是由瀏覽器生成的。為false表示事件是由開發人員通過JavaScript創建的（DOM3級事件中新增） |
| type | String | 只讀 | 被觸發的事件的類型 |
| view | AbstractView | 只讀 | 與事件關聯的抽象視圖。等同於發生事件的window對象 |
1、對比currentTarget和target
在事件處理程序內部，對象this始終等於currentTarget的值，而target則只是包含事件的實際目標。
舉例：頁面有個按鈕，在body（按鈕的父節點）中注冊click事件，點按鈕時click事件會冒泡到body進行處理。
<body> <input id="btn" type="button" value="click"/> <script> document.body.onclick=function(event){ console.log("body中注冊的click事件"); console.log("this===event.currentTarget? "+(this===event.currentTarget)); //true console.log("currentTarget===document.body?"+(event.currentTarget===document.body)); //true console.log('event.target===document.getElementById("btn")? '+(event.target===document.getElementById("btn"))); //true } </script> </body>
運行結果為：
2、通過type屬性，可以在一個函數中處理多個事件。
原理：通過檢測event.type屬性，對不同事件進行不同處理。
舉例：定義一個handler函數用來處理3種事件：click,mouseover,mouseout。
<body> <input id="btn" type="button" value="click"/> <script> var handler=function(event){ switch (event.type){ case "click": alert("clicked"); break; case "mouseover": event.target.style.backgroundColor="pink"; break; case "mouseout": event.target.style.backgroundColor=""; } }; var btn=document.getElementById("btn"); btn.onclick=handler; btn.onmouseover=handler; btn.onmouseout=handler; </script> </body>
運行效果：點擊按鈕，彈出框。鼠標經過按鈕，按鈕背景色變為粉色；鼠標離開按鈕，背景色恢復默認。
3、stopPropagation()和stopImmediatePropagation()對比
同：stopPropagation()和 stopImmediatePropagation()都可以用來取消事件的進一步捕獲或冒泡。
異：二者的區別在於當一個事件有多個事件處理程序時，stopImmediatePropagation()可以阻止之后事件處理程序被調用。
舉例：
<body> <input id="btn" type="button" value="click"/> <script> var btn=document.getElementById("btn"); btn.addEventListener("click",function(event){ console.log("buttn click listened once"); // event.stopPropagation();//取消注釋查看效果 // event.stopImmediatePropagation();//取消注釋查看效果 },false); btn.addEventListener("click",function(){ console.log("button click listened twice"); },false); document.body.onclick= function (event) { console.log("body clicked"); } </script> </body>
運行效果：
4、eventPhase
eventPhase值在捕獲階段為1，處於目標階段為2，冒泡階段為3。
| 常量 | 值 |
|---|---|
| Event.CAPTURING_PHASE | 1 |
| Event.AT_TARGET | 2 |
| Event.BUBBLING_PHASE | 3 |
可以通過下面代碼查看：
var btn=document.getElementById("btn"); btn.onclick= function (event) { console.log(event.CAPTURING_PHASE); //1 console.log(event.AT_TARGET); //2 console.log(event.BUBBLING_PHASE); //3 }
例子：
<body> <input id="btn" type="button" value="click"/> <script> var btn=document.getElementById("btn"); btn.onclick= function (event) { console.log("按鈕DOM0級方法添加事件處理程序eventPhase值為？"+event.eventPhase); } btn.addEventListener("click",function(event){ console.log("按鈕DOM2級方法添加事件處理程序，且addEventListener第三個參數為true時eventPhase值為？"+event.eventPhase); },true); btn.addEventListener("click",function(event){ console.log("按鈕DOM2級方法添加事件處理程序，且addEventListener第三個參數為false時eventPhase值為？"+event.eventPhase); },false); document.body.addEventListener("click", function (event) { console.log("body上添加事件處理程序，且在捕獲階段eventPhase值為？"+event.eventPhase); },true); document.body.addEventListener("click", function (event) { console.log("body上添加事件處理程序，且在冒泡階段eventPhase值為？"+event.eventPhase); },false); </script>
運行效果：
2、IE中event的公共成員
IE中的event的屬性和方法和DOM一樣會隨着事件類型的不同而不同，但是也有一些是所有對象都有的公共成員，且這些成員大部分有對應的DOM屬性或方法。
| 屬性/方法 | 類型 | 讀/寫 | 說明 |
| cancelBubble | Boolean | 讀/寫 | 默認為false,但將其設置為true就可以取消事件冒泡（與DOM中stopPropagation()方法的作用相同） |
| returnValue | Boolean | 讀/寫 | 默認為true，但將其設置為false就可以取消事件的默認行為（與DOM中的preventDefault()方法的作用相同） |
| srcElement | Element | 只讀 | 事件的目標（與DOM中的target屬性相同） |
| type | String | 只讀 | 被觸發的事件的類型 |
七、鼠標事件
這部分內容見javaScript事件（五）事件類型之鼠標事件
本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載注明出處：http://www.cnblogs.com/starof/p/4096198.html有問題歡迎與我討論，共同進步。