溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了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.jb51.net/table/javascript_event
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript事件相關操作與技巧大全》、《JavaScript頁面元素操作技巧總結》、《JavaScript操作DOM技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
