JavaScript學習筆記（事件）

事件流

事件流描述頁面接受事件的順序，DOM2事件規定事件流分爲三個階段：

• 事件捕獲階段
• 事件目標階段
• 事件冒泡階段

事件處理程序

DOM0級事件處理程序
DOM0級事件就是將事件處理程序賦值給一個元素的事件處理屬性，像下面這種形式

var btn = document.getElementById("myBtn");

btn.onclick = function(){
 alert("Clicked");
}; 

DOM2級事件處理程序
DOM2級事件新增了兩個方法，：綁定事件addEventListener()和移除事件removeEventListener(),方法接收三個參數，事件類型，事件處理程序，布爾值（true代表事件捕獲，false代表事件冒泡）

• DOM2級方法可以添加多個同類型事件，執行順序從前到後依次執行
• 事件執行程序運行在事件對象作用域內
• 通過addEventListener添加的匿名函數無法解除事件，可以傳入一個外部函數名

var btn = document.getElementById("myBtn");

function handle(){
	alert('添加事件')
}

btn.addEventListener("click",handle, false);

btn.removeEventListener("click", handle false);

IE事件處理程序
IE 實現了與 DOM 中類似的兩個方法：attachEvent()和 detachEvent()。這兩個方法接受相同
的兩個參數：事件處理程序名稱與事件處理程序函數

• IE事件處理程序同樣可以添加多個事件，執行順序從後往前
• 與DOM事件不同的是，執行函數運行在window作用域
• 事件類型要加on
• 和DOM事件執行程序一樣，只有通過傳入外部事件執行程序的引用，才能用detachEvent移除事件

	var btn = document.getElementById("myBtn");
	
	var handler = function(){
	 alert("Clicked");
	};
	
	btn.attachEvent("onclick", handler);
	//這裏省略了其他代碼
	btn.detachEvent("onclick", handler); 

跨瀏覽器事件處理程序
爲了在跨瀏覽器事件處理實現兼容，使用一個對象封裝兼容的事件處理程序

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;
	 }
	 }
}; 

兼容DOM2級事件的有限採用DOM2級事件處理程序，不兼容的採用IE事件處理程序，全都不兼容採用DOM0級事件

事件對象

觸發DOM上的事件是，會產生一個事件對象，事件對象包含了關於事件的一些信息，所有瀏覽裏都支持事件對象，但是支持方式不同

DOM中事件對象
DOM事件會將event事件對象在事件處理程序中傳入，無論DOM0級或者DOM2級

var btn = document.getElementById("myBtn");
btn.onclick = function(event){
 alert(event.type); //"click"
};
btn.addEventListener("click", function(event){
 alert(event.type); //"click"
}, false); 

DOM事件對象中的常用屬性和方法

• type 被觸發的事件類型
• target 事件的目標
• preventDefault() 取消默認事件
• stopPropagation() 取消事件捕獲和冒泡

IE中事件對象
IE中事件對象的支持方式，根據採用不同事件處理程序而不同

1.採用DOM0級事件處理程序，event事件對象在window上

var btn = document.getElementById("myBtn");
btn.onclick = function(){
 var event = window.event;
 alert(event.type); //"click"
}; 

2.採用IE事件處理程序，event對象可以通過window.event獲取，也可以在事件執行程序裏傳入

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(event){
 alert(event.type); //"click"
}); 

3.通過HTML特性指定的事件處理程序，那麼還可以通過一個名叫event的變量來訪問

<input type="button" value="Click Me" onclick="alert(event.type)"> 

常用事件對象屬性和方法

• type 事件類型
• srcElement 事件目標
• returnValue 設置爲false取消默認行爲
• cancelBubble 設置爲true取消事件冒泡