本文實例講述了JavaScript事件對象event用法。分享給大家供大家參考，具體如下：
前面的文章已經介紹了JavaScript為事件指定處理程序的五種方式。
下面繼續介紹JavaScript的事件對象event。
事件對象event包含導致事件的元素、事件的類型以及其他與特定事件相關的信息。
1、DOM中的事件對象
| 屬性/方法 | 類型 | 說明 |
|---|---|---|
| bubbles | Boolean | 表明事件是否冒泡 |
| cancelabel | Boolean | 表明是否可以取消事件的默認行為 |
| currentTarget | Element | 事件處理程序當前正在處理事件的那個元素（監聽事件的那個元素） |
| defaultPrevented | Boolean | true表示已經調用了preventDefault() |
| detail | Integer | 與事件相關的細節信息 |
| eventPhase | Integer | 調用事件處理程序的階段：1表示捕獲階段，2表示處于目標，3表示冒泡階段 |
| preventDefault() | Function | 取消事件的默認行為，cancelable為true才可使用此方法 |
| stopImmediatePropagation() | Function | 取消事件的捕獲或冒泡，同時阻止任何事件處理程序被調用 |
| stopPropagation() | Function | 取消事件的捕獲或冒泡，bubbles為true才可使用此方法 |
| target | Element | 事件的目標 |
| trusted | Boolean | true表示事件是瀏覽器生成的，false表示事件是由開發人員通過JavaScript創建的 |
| type | String | 事件的類型 |
| view | AbstractView | 與事件關聯的抽象視圖，等同于發生事件的window對象 |
若直接將事件處理程序指定給了目標元素，則this，currentTarget和target包含相同的值；若事件處理程序存在于按鈕的父節點中，則this和currentTarget等于父節點，而target等于按鈕元素。
在需要通過一個函數處理多個事件時，可以使用type屬性：
var btn = document.getElementsByTagName("button")[0];var handler = function(event) { switch(event.type) { case "click": alert("click"); case "mouseover": alert("mouseover"); case "mouseout": alert("mouseout"); }}btn.onclick = handler;btn.onmouseover = handler;btn.onmouseout = handler;注意：只有在事件處理程序執行期間，event對象才會存在；一旦事件處理程序執行完畢，event對象就會被銷毀。
2、IE中的事件對象
訪問IE中的event對象有幾種不同的方式：
1) 在使用DOM0級方法添加事件處理程序時，通過window.event訪問event對象；
2) 在使用attachEvent()方法添加事件處理程序時，event對象會作為參數被傳入事件處理程序中，也可以通過window.event訪問event對象；
3) 在通過HTML特性指定事件處理程序時，還可以通過一個名為event的變量來訪問event對象。
IE中的事件目標通過srcElement屬性獲取，this不一定等于事件目標：在使用DOM0級方法添加事件處理程序時，this等于事件目標，但在使用attachEvent()方法添加事件處理程序時，this則不等于事件目標。
| 屬性/方法 | 類型 | 說明 |
|---|---|---|
| cancelBubble | Boolean | 默認為false，但將其設置為true就可以取消事件冒泡，由于IE不支持事件捕獲，因此只能取消事件冒泡，而stopPropagation()則可以同時取消事件捕獲或冒泡 |
| returnValue | Boolean | 默認為true，但將其設置為false就可以取消事件的默認行為 |
| srcElement | Element | 事件的目標 |
| type | String | 事件的類型 |
3、跨瀏覽器的事件
var EventUtil = { addHandler: function(element, type, handler) { ...... }, getEvent: function(event) { return event ? event : window.event; }, getTarget: function(event) { return enent.target || target.srcElement; }, preventDefault: function(event) { if (event.preventDefault) event.preventDefault(); else event.returnValue = false; }, removeHandler: function(element, type, handler) { ...... }, stopPropagation: function() { if (event.stopPropagation) event.stopPropagation(); else event.cancelBubble = true; }};var btn = document.getElementsByTagName("button")[0];btn.onclick = function(event) { event = EventUtil.getEvent(event); EventUtil.preventDefault(event); EventUtil.stopPropagation(event); alert(event.target.type); // 輸出：click}PS：關于javascript事件說明可參考本站javascript事件與功能說明大全：http://tools.VeVB.COm/table/javascript_event
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript事件相關操作與技巧大全》、《JavaScript頁面元素操作技巧總結》、《JavaScript操作DOM技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
