javascript中的事件Event（一）— 事件流
一、Event基本資訊
1、事件流：描述的是從頁面中接受事件的順序
IE的事件流是事件冒泡流，Netscape的事件流是事件捕獲流。
2、事件冒泡
IE的事件流叫做事件冒泡(event bubbing)，即事件開始時由具體的元素接受，然後逐級向上傳播到較為不具體的節點。如果點選div。則事件流如下：
div --> body --> html --> body
事件冒泡的過程如圖
3、事件捕獲
Netscape提出的事件流是事件捕獲(event capturing)，即不太具體的節點更早的接受到事件，然後逐級向下傳遞，具體的節點最後接受到事件。如果點選div，則事件流如下：
body--> html --> body -->div
4、DOM事件流
DOM2級規定的事件流包括三個階段：事件捕獲階段、處於目標階段和事件捕獲階段。
事件流傳遞情況如下
二、事件處理(handler)
1、事件監聽器或事件處理程式，即響應某個事件的函式，名字是以"on"開頭的。
2、DOM0 級的Event handler
每個元素（包括window,document）都有自己的事件處理程式屬性，屬性通常全部小寫，將屬性設定成函式即可指定處理函式。
var btn = document.getElementById('myBtn'); btn.onclick = function() { alert(this.id); // 'myBtn' }
注：事件中的this物件引用當前元素，即可訪問元素的所有屬性和方法。
3、DOM2級的Event handler
定義了2個方法用於指定和刪除事件處理函式：addEventListener，removeEventListener。
btn.addEventListener(name, handler, capture);
btn.removeEventListener(name, handler, capture); 倆個方法接受三個引數：
name：事件名，
handler：事件處理函式，
capture： 是否在捕獲階段呼叫handler； true 是， false 在冒泡階段處呼叫handler
注：通過addEventListener新增的事件處理程式只能使用removeEventListener移除。
4、IE中的Event handler
IE 中實現了倆個方法：attachEvent、detachEvent。
attachEvent('on'+name, handler);
detachEvent('on'+name, handler);當對一個元素新增多個事件時，觸發的順序是新增順序相反的。
注：在使用DOM0級方法時，事件處理程式在其所屬元素作用域執行，而使用attachEvent方法的時，事件處理程式執行在全域性作用域下。即
btn.attachEvent('onclick', function(){
alert(this === window); // => true
})5、跨瀏覽器事件處理程式
var EventUtil = {
addHandler: function(element, type, handler){
if (element.addEventListener){
element.addEventListener(type, handler, false);
} else if (element.attachEvent){
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
removeHandler: function(element, type, handler){
if (element.removeEventListener){
element.removeEventListener(type, handler, false);
} else if (element.detachEvent){
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
},
getEvent: function(event){
return event ? event : window.event;
},
getTarget: function(event){
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;
}
};
三、事件物件
在觸發DOM上的事件時，會產生一個包含所有與事件相關資訊的物件Event。
1、DOM中的事件物件
Event中的基礎屬性：
|
bubbles |
Boolean |
只讀 |
事件是否冒泡 |
|
cancelable |
Boolean |
只讀 |
是否可以取消事件預設行為 |
|
currentTarget |
Element |
只讀 |
處理程式現在正在處理的元素 |
|
detail |
Integer |
只讀 |
事件相關的細節資訊 |
|
preventDefault |
Function |
只讀 |
取消事件的預設行為。cancelable為true可用。 |
|
stopPropagation |
Function |
只讀 |
阻止事件捕獲或冒泡。bubbles為true可用 |
|
target |
Element |
只讀 |
事件的目標元素 |
|
trusted |
Boolean |
只讀 |
true表示是瀏覽器生成的；false為開發人員建立 |
|
type |
String |
只讀 |
事件型別 |
|
eventPhase |
Integer |
只讀 |
事件所處階段：1 捕獲階段； 2 處於目標； 3 冒泡階段 |
2、IE中的事件物件
訪問IE中的Event物件的方式有如下幾種不同方式：
1）使用DOM0級方法新增的事件，event物件作為window物件的一個屬性存在。使用window.event。
2）通過HTML特性指定的事件，可以通過event變數來訪問event物件。
Event物件包括的屬性和方法如下
|
cancelBubble |
Boolean |
只讀 |
預設為false，為true時阻止事件冒泡 |
|
returnValue |
Boolean |
只讀 |
預設為true，為false時阻止預設事件行為 |
|
srcElement |
Element |
只讀 |
事件目標，與DOM中的target屬性相同 |
|
type |
String |
只讀 |
Event 第一部分暫時介紹到這裡，後續有空再更新學習筆記。感謝觀看！！