說明：本文為《JavaScript高級程序設計》第9章學習筆記。
一．今天的事件
事件是DOM的一部分，在DOM Level1中未定義任何事件，在Level中定義了一小部分子集，完整的事件是在Level3中規定的，該標準在2004年最終定案。
Mozilla的事件模式與DOM標準最為接近，IE成為唯一一個對DOM事件模式缺乏良好支持的瀏覽器。
二．事件流
事件流意味著在頁面上可有不僅一個，甚至多個元素響應同一個事件。
1. 冒泡型事件
IE上的解決方案的綽號為冒泡的技術。冒泡型事件的基本思想是，時間按照最特定的目標到最不特定的事件目標的順序觸發。
IE6.0中，<html/>元素也可接收冒泡的時間。
2. 捕獲型事件
Netscape Navigator4.0使用了捕獲型事件的解決方案。事件從最不確定的對象（document對象）開始觸發，然后到最精確。
3．DOM事件流
DOM同時支持兩種事件模型：捕獲型事件和冒泡型事件，但是，捕獲型事件先發生。兩種事件流會觸發DOM中的所有對象，從document對象開始，也在document對象結束。
DOM事件模型的最獨特的性質是，文本節點也觸發事件（在IE中不會）。
三．時間處理函數/監聽函數
事件是用戶或瀏覽器自身進行的特定行為。這些事件都有自己的名字，如click、load等。用于響應某個事件而調用的函數稱為事件處理函數。
如果是JavaScript中分配的事件處理函數，則需要首先獲得要處理對象的引用，然后將函數賦值給事件處理函數屬性，eg1.
var oDiv = document.getElementById(“div1”);
oDiv.onclick = function() 
{
alert(“I was clicked.”);
} 用這個分配方法，事件處理函數必須小寫，才能正確響應事件。
Eg2. <div onclick=”alert(‘I was clicked.’)”></div>
在例二中，事件處理函數的大小寫可以任意
1. IE
在IE中，每個元素和window對象都有兩個方法：attachEvent()和detachEvent()。attachEvent()用來給一個事件附加事件處理函數。而detachEvent()用來將事件處理函數分離出來。Eg.
var fnClick = function() {
alert(“Clicked!”);
}
var oDiv = document.getElementById(“div1”);
oDiv.attachEvent(“onclick”, fnClick);
oDiv.detachEvent(“onclick”, fnClick);
2. DOM
DOM方法addEventListener()和removeEventListener()用來分配和移除事件處理函數。與IE不同，這些方法需要三個參數：事件名稱、要分配的函數和處理函數用于冒泡階段（為false時）還是捕獲階段（為true時）。Eg.
oDiv. addEventListener (“onclick”, fnClick, false);
oDiv.removeEventListener (“onclick”, fnClick, false);
如果使用傳統方法直接給事件處理函數屬性賦值，事件處理函數將被添加到事件的冒泡階段，eg.
oDiv.onclick = fnClick;
oDiv.removeEventListener (“onclick”, fnClick, false);
四． 事件對象
事件對象只在發生事件時才被創建，且只有事件處理函數才能訪問。所有事件處理函數執行完畢后，事件對象就被銷毀。
1. 定位
在IE中，事件對象是window對象的一個屬性event，也就是說，事件處理函數必須這樣訪問事件對象：
oDiv.onclick = function() {
var oEvent = window.event;
}
Event對象只能在事件發生時訪問。所有的事件處理函數執行完畢后，事件對象就被銷毀。
2. 屬性/方法
見頁面233-235頁，在此不詳述。
3. 相似性
1） 獲取事件類型
下面代碼可在任何瀏覽器中獲取事件的類型：
var sType = oEvent.type;
它返回“click”或“mouseover”之類的值。Eg.
function handleEvent(oEvent) {
if (oEvent.type == “click”) {
alert(“Clicked!”);
} else if (oEvent.type == “mouseover”) {
alert(“mouse over!”);
}
}
oDiv.onclick = handleEvent;
oDiv.onmouseover = handleEvent;
2） 獲取按鍵代碼
Eg. var iKeyCode = oEvent.keyCode;
例如，Enter鍵的keyCode為13，空格鍵的keyCode為32，回退鍵為8.
3） 檢測Shift、Alt和Ctrl鍵
Eg. var bShift = oEvent.shiftKey;
var bAlt = oEvent.altKey;
var bCtrl = oEvent.ctrlKey;
4） 獲取客戶端坐標
Eg. var iClientX = oEvent.clientX;
var iClientY = oEvent.clientY;
5） 獲取屏幕坐標
可用screenX和screenY屬性來獲取鼠標指針在計算機屏幕中的位置
var iScreenX = oEvent.screenX;
var iScreenY = oEvent.screenY;
4．區別
1）獲取目標
在IE中：var oTarget = oEvent.srcElement;
在DOM兼容的瀏覽器中：var oTarger = oEvent.target;
2）獲取字符代碼
在IE中：var iCharCode = oEvent.keyCode;
在DOM兼容的瀏覽器中：var iCharCode = oEvent.charCode;
3）阻止某個事件的默認行為
在IE中：oEvent.returnValue = false;
在DOM兼容的瀏覽器中：oEvent.preventDefault();
4）阻止事件復制（冒泡）
在IE中：oEvent.cancelBubble = true;
在mozilla中：oEvent.stopPropagation ();
五．事件的類型
DOM標準定義了以下幾種事件:
鼠標事件
鍵盤事件
HTML事件：窗口發生變動或者發生特定的客戶端-服務端交互時觸發；
突變事件：底層的DOM結構發生改變時觸發。
1. 鼠標事件
Eg. click、dbclick、mousedown、mouseout、mouseover、mouseup、mouseover。
1） 屬性
Eg. 坐標屬性（eg。clientX和clientY等）、type屬性、target或srcElement屬性、shiftKey、ctrlKey、altKey、metaKey（DOM）屬性、button屬性（只在mousedown、mouseover、mouseout、mouseover和mouseup事件中）。
2） 順序
在同一個目標上要按順序發生以下事件: mousedown->mouseup->click->mousedown->mouseup->click->dbclick。
2. 鍵盤事件
鍵盤事件有：keydown、keypress和keyup。
1） 事件的屬性
對某個鍵盤事件，會填入如下的事件屬性: keyCode、charCode（僅DOM）、target(DOM)或者srcElement（IE）、shiftKey、ctrlKey、altKey、metaKey（DOM）屬性。
2） 順序
按下一個字符鍵，發生事件順序為: keydown->keypress->keyup;
按下一個非字符鍵，發生事件順序為:keydown->keyup。
3. HTML事件
HTML事件有: load、unload、abort、error、select、change、submit、reset、resize、scroll、focus、blur事件。
1） load和unload事件
eg. window.onload = function() {
alert(“loaded!”);
}
2） resize事件
resize事件用來判斷何時動態的改變某些元素。Eg.
<body onresize=”alert(‘Resizing’)”>
最大化或最小化窗口時，也會觸發resize事件。
3） Scroll事件
Eg. <body onscroll=”alert(‘Scroll)”>
4．變化事件
變化事件包括如下內容：
DOMSubtreeModified——當文檔或者元素的子樹因為添加或刪除節點而改變時觸發；
DOMNodeInserted——當一個節點作為另一個節點的子節點插入時觸發；
DOMNodeRemoved——當一個節點作為另一個節點的子節點刪除時觸發；
DOMNodeRemovedFromDocument——當一個節點從文檔中刪除時觸發；
DOMNodeInsertedIntoDocument——當一個節點插入到文檔中時觸發。
這些事件的目的是，提供一個獨立于語言的事件范圍，使其可使用在所有基于XML的語言中。
六．跨平臺的事件
1. EventUtil對象
var EventUtil = new Object;
2. 添加/刪除事件處理函數
EventUtil.addEventHandler = function() {
if (oTarget.addEventListener) { //對DOM兼容的瀏覽器
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) { //對IE
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
}
EventUtil.removeHandler = function(oTarget, sEventType, fnHandler) {
if (oTarget.removeEventListener) { //對DOM兼容的瀏覽器
oTarget.removeEventListener(sEventType, fnHandler, false);
} else if (oTarget.detachEvent) { //對IE
oTarget.detachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = null;
}
}
3. 格式化event對象
一種對付IE和DOM中的event對象之間區別的最佳手段是，調整它們使之盡可能地表現相似，因為更多的瀏覽器使用的是DOM的事件類型，所以將IE的事件模型調整為接近于DOM事件模型就可以了。
根據DOM屬性/方法與IE屬性/方法的不同，最后可得出如下的格式化event對象函數，如下所示：
EventUtil.formatEvent = function(oEvent) {
if (isIE && isWin) {
oEvent.charCode = (oEvent.type == "keypress") ? oEvent.keyCode : 0;
oEvent.eventPhase = 2;
oEvent.isChar = (oEvent.charCode > 0);
oEvent.pageX = oEvent.clientX + document.body.scrollLeft;
oEvent.pageY = oEvent.clientY + document.body.scrollTop;
oEvent.preventDefault = function() {
this.returnValue = false;
};
if (oEvent.type == "mouseout") {
oEvent.relatedTarget = oEvent.toElement;
} else if (oEvent.type == "mouseover") {
oEvent.relatedTarget = oEvent.fromElement;
}
oEvent.stopPropagation = function() {
this.cancelBubble = true;
};
oEvent.target = oEvent.srcElement;
oEvent.time = (new Date()).getTime();
}
return oEvent;
}
4. 獲取事件對象
IE和DOM使用不同的方法來獲取event對象。在IE中，event對象是與window對象相關的，而在DOM中，它獨立于任何其他對象，并且是作為參數傳遞的。下面我們編寫一個通用的獲取event對象的函數，代碼如下：
EventUtil.getEvent = function() {
if (window.event) {
return this.formatEvent(window.event);
} else {
return EventUtil.getEvent.caller.arguments[0];
}
}
調用舉例如下：
oDiv.onclick = function() {
var oEvent = EventUtil.getEvent();
}
七. 小結
本章詳細介紹了JavaScript中事件、事件流的概念，詳細研究了event對象，最后一節還創建了一個跨瀏覽器事件庫，可使用同一套方法來訪問事件對象，添加/刪除事件處理函數，而無需考慮瀏覽器檢測的問題。
posted on 2007-08-27 09:17
阿蜜果 閱讀(3783)
評論(9) 編輯 收藏 所屬分類:
Javascript