## 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();
}
~~~
- 前言
- 第一章 JavaScript簡介
- 第三章 基本概念
- 3.1-3.3 語法、關鍵字和變量
- 3.4 數據類型
- 3.5-3.6 操作符、流控制語句(暫略)
- 3.7函數
- 第四章 變量的值、作用域與內存問題
- 第五章 引用類型
- 5.1 Object類型
- 5.2 Array類型
- 5.3 Date類型
- 5.4 基本包裝類型
- 5.5 單體內置對象
- 第六章 面向對象的程序設計
- 6.1 理解對象
- 6.2 創建對象
- 6.3 繼承
- 第七章 函數
- 7.1 函數概述
- 7.2 閉包
- 7.3 私有變量
- 第八章 BOM
- 8.1 window對象
- 8.2 location對象
- 8.3 navigator、screen與history對象
- 第九章 DOM
- 9.1 節點層次
- 9.2 DOM操作技術
- 9.3 DOM擴展
- 9.4 DOM2和DOM3
- 第十章 事件
- 10.1 事件流
- 10.2 事件處理程序
- 10.3 事件對象
- 10.4 事件類型
- 第十一章 JSON
- 11.1-11.2 語法與序列化選項
- 第十二章 正則表達式
- 12.1 創建正則表達式
- 12.2-12.3 模式匹配與RegExp對象
- 第十三章 Ajax
- 13.1 XMLHttpRequest對象
- 你不知道的JavaScript
- 一、作用域與閉包
- 1.1 作用域
- 1.2 詞法作用域
- 1.3 函數作用域與塊作用域
- 1.4 提升
- 1.5 作用域閉包
- 二、this與對象原型
- 2.1 關于this
- 2.2 全面解析this
- 2.3 對象
- 2.4 混合對象“類”
- 2.5 原型
- 2.6 行為委托
- 三、類型與語法
- 3.1 類型
- 3.2 值
- 3.3 原生函數