## 13.3 事件對象 在觸發DOM上都某個事件時，會產生一個事件對象event，這個對象包含這所有與事件有關的信息。包括導致事件的元素、事件的類型以及其他與特定事件相關的信息。 ### 13.3.1 DOM中的事件對象 兼容DOM的瀏覽器會將一個event對象傳入到事件處理程序中。無論指定事件處理程序時使用什么方法（DOM0/DOM2），都會傳入event對象。 * 只有在事件處理程序執行期間，event對象才會存在；一旦事件處理程序執行完成，event對象就會被銷毀。 event對象包含與創建它的特定事件有關的屬性和方法，觸發的事件類型不一樣，可用的屬性和方法也不一樣。不過，所有事件都有下列屬性和方法： |屬性/方法|類型|讀/寫|說明| |---|---|---|---| | bubbles | 布爾值 | 只讀 | 表示事件是否冒泡 | | cancelable |布爾值| 只讀 | 表示是否可以取消事件的默認行為 | | currentTarget | Element類型 | 只讀 | 其事件處理程序當前正在處理事件的那個元素 | | defaultPrevented | 布爾值 | 只讀 | 為true時表示已經調用了preventDefault()，DOM3新增 | | detail| Integer類型 | 只讀 | 與事件相關的細節信息 | | eventPhase| Integer類型 | 只讀 | 調用事件處理程序的階段：1表示捕獲階段，2表示目標階段，3表示冒泡階段 | | preventDefault() | Function類型 | 只讀 | 取消事件的默認行為 | | stopImmediatePropagation() | Function類型 | 只讀 | 取消事件的進一步捕獲或冒泡，同時組織任何事件處理程序被調用 | | stopPropagation()| Function類型 | 只讀 | 取消事件的進一步捕獲或冒泡 | | target | Element | 只讀 | 事件的目標 | | trusted| 布爾值 | 只讀 | 為true時表示事件是瀏覽器生成的，為false時表示事件是開發人員創建的 | | type | String類型 | 只讀 | 事件類型 | | view| AbstractView | 只讀 | 與事件關聯的抽象視圖，等同于發生事件的window對象 | * 在事件處理程序內部，對象this始終等于currentTarget的值，而target則包含事件的實際目標。 ~~~ document.body.onclick = function(event){ alert(event.curentTarget === document.body); //true alert(this === document.body); //true alert(event.target === document.getElementById("myBtn")); //true ~~~ * 只有cancelable屬性設置為true的事件，才可以使用preventDefault()來取消其默認行為。 ### 13.3.2 IE中的事件對象 在使用DOM0級方法添加事件處理程序時，event對象作為window對象的一個屬性存在。 IE的event對象同樣也包含于創建它的事件相關的屬性和方法。 |屬性/方法|類型|讀/寫|說明| |---|---|---|---| | cancelBubble | 布爾值 | 讀/寫 | 默認值為false，將其設置為true時，作用和DOM中的stoPropagation()方法一樣 | | returnValue |布爾值| 讀/寫 | 默認為true，將其設為false時，作用和DOM中的preventDefault()方法的作用一樣。 | | srcElement | Element類型 | 只讀 | 事件的目標（與DOM中的target屬性相同） | | defaultPrevented | 布爾值 | 只讀 | 被觸發的事件的類型 | ### 13.3.3 跨瀏覽器的事件對象 ~~~ var EventUtil = { addHandler: function(element, type, handler, useCapture) { // 省略代碼 }, removeHandler: function(element, type, handler, useCapture) { // 省略代碼 }, getEvent: function(event){ return event || window.event; }, getTarget: function(evetn){ return event.target || event.srcElement; }, preventDefault: function(event){ if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue = false; } }, stopPropagation: function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble = true; } } }; //調用 div.onclick = function(event){ event = EventUtil.getEvent(event); target = EventUtil.getTarget(); EventUtil.preventDefault(); EventUtil.stopPropagation(); } ~~~