一.今天的事件
事件是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 οnclick=”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 οnresize=”alert(‘Resizing’)”>
最大化或最小化窗口時,也會觸發resize事件。
3) Scroll事件
Eg. <body οnscrοll=”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對象,最後一節還創建了一個跨瀏覽器事件庫,可使用同一套方法來訪問事件對象,添加/刪除事件處理函數,而無需考慮瀏覽器檢測的問題。
另外查看對象的事件可以在 http://www.w3school.com.cn/htmldom/dom_obj_event.asp