1、排錯、調試
2、事件
3、Event對象
4、事件冒泡
5、事件句柄和 this
6、DOM Level 2事件模型
7、測驗
1、排錯、調試
Firebug是最常用的 Firefox開發工具，同時常用的 Web工具還有 Web Developer toolkit，該工具功能包括頁面 HTML和 CSS代碼的校驗、可訪問性檢查、查看 CSS和 cookies、檢查圖像、查看 JavaScript修改后的頁面源代碼（包括動態源代碼）。
2、事件
事件包括：用戶界面事件（鼠標、鍵盤觸發的）、邏輯事件（一個處理的結果）、和變化事件（修改文檔的操作）。
事件句柄 (Event Handlers)
HTML 4.0 的新特性之一是能夠使 HTML 事件觸發瀏覽器中的行為，比如當用戶點擊某個 HTML 元素時啟動一段 JavaScript。下面是一個屬性列表，可將之插入 HTML 標簽以定義事件的行為。
注：HTML DOM Event 對象 http://www.w3school.com.cn/htmldom/dom_obj_event.asp
內聯模式/內聯注冊模式：
以屬性的形式為 HTML元素添加屬性的方法。
<body onload="var 1=23; i*=3; alert(i);">
<body onload="calcNumber();">
傳統模式/傳統注冊模式：
通過對象屬性將一個函數指派為事件句柄。如果想禁用事件處理，那么可以將事件句柄的值賦為 null。
window.onload = calcNumber;
注：
在 DOM Level 0事件模型中，任何對象只允許指定一個事件句柄。如果你想針對某一特定對象的某個事件指定多個函數，則需要在事件句柄代碼中列出他們：
內嵌模式：
<body onload="helloMsg(); helloTwice();">
傳統模式：
function helloMsg() {
var helloString = "hello there";
alert(helloString);
helloTwice();
}
當要求瀏覽器停止執行事件行為，可以從事件句柄函數中返回 false值。
3、Event對象
Event對象是和所有事件相關的。它有一些用來提供事件相關信息的屬性，如 Web頁面中鼠標點擊的位置。
IE將 Event視為 window對象的屬性。當處理事件時，將通過程序訪問 window對象，其所包含的數據也會相應的進行填充。
function mouseDown() {
var locString = "X = " + window.event.screenX + " Y = " + window.event.screenY;
alert(locString);
}
document.onmousedown = mouseDown;
在基于 Netscape的瀏覽器（如 Firefox、Mozilla、Opera和 Safari）中，獲取 Event對象的方法是不同的：他將作為函數的一部分傳入。
function mouseDown(theEvent) {
var locString = "X = " + theEvent.screenX + " Y = " + theEvent.screenY;
alert(locString);
}
document.onmousedown = mouseDown;
處理這些瀏覽器差異的方法之一是檢查傳入函數的 Event對象是否已經實例化。如果是，那么將這個 Event對象賦給一個局部變量；否則，將假定 window.event為該事件，并將其賦給這個局部變量。
function mouseDown(nsEvent) {
var theEvent = nsEvent ? nsEvent : window.event; //判斷 nsEvent對象是否已定義。定義則賦值，否則選擇 window.event屬性
var locString = "X = " + theEvent.screenX + " Y = " + theEvent.screenY;
alert(locString);
}
document.onmousedown = mouseDown;
鼠標 / 鍵盤屬性
| 屬性 |
描述 |
IE |
F |
O |
W3C |
| altKey |
返回當事件被觸發時，"ALT" 是否被按下。 |
6 |
1 |
9 |
Yes |
| button |
返回當事件被觸發時，哪個鼠標按鈕被點擊。 |
6 |
1 |
9 |
Yes |
| clientX |
返回當事件被觸發時，鼠標指針的水平坐標。 |
6 |
1 |
9 |
Yes |
| clientY |
返回當事件被觸發時，鼠標指針的垂直坐標。 |
6 |
1 |
9 |
Yes |
| ctrlKey |
返回當事件被觸發時，"CTRL" 鍵是否被按下。 |
6 |
1 |
9 |
Yes |
| metaKey |
返回當事件被觸發時，"meta" 鍵是否被按下。 |
No |
1 |
9 |
Yes |
| relatedTarget |
返回與事件的目標節點相關的節點。 |
No |
1 |
9 |
Yes |
| screenX |
返回當某個事件被觸發時，鼠標指針的水平坐標。 |
6 |
1 |
9 |
Yes |
| screenY |
返回當某個事件被觸發時，鼠標指針的垂直坐標。 |
6 |
1 |
9 |
Yes |
| shiftKey |
返回當事件被觸發時，"SHIFT" 鍵是否被按下。 |
6 |
1 |
9 |
Yes |
注：HTML DOM Event 對象 http://www.w3school.com.cn/htmldom/dom_obj_event.asp
注：
在 IE中，fromElement 對于 mouseover 和 mouseout 事件，fromElement 引用移出鼠標的元素。
而在 Mozilla/Firefox中，relatedTarget 返回與事件的目標節點相關的節點。
要解決瀏覽器差異，可以使用：
var oldElement = theEvent.fromElement ? theEvent.fromElement : theEvent.relatedTarget;
4、事件冒泡
如果你為多個嵌套的元素設置相同的事件句柄，會發生什么呢？他們將以什么樣的順序觸發？如果你想使得一次只影響一個元素，那么如何保存觸發事件句柄的事件呢？
要管理元素堆棧中的事件，其中一個方法就是眾所周知的事件冒泡。在事件冒泡中，最內部的元素將首先觸發該事件，然后堆棧內的下一個元素觸發該事件，以此類推，直到最外面的元素。如果事件句柄被指定給所有元素，那么這些事件將依次被觸發。
如果 div2在 div1內部，而 div1又在 document內部，三者都做了事件處理。當事件觸發的時候，優先最里面的 div2元素，然后是 div1元素，最后是 document元素。
如果你有一個元素堆棧，并且只希望一個元素觸發該事件句柄，那么你可以取消事件冒泡機制。如果在 IE中要取消一個事件冒泡，可以使用 IE中事件的 cancelBubble屬性；對于 Mozilla而言，則應該使用事件的 stopPropagation方法。你可以先檢查 stopPropagation方法是否存在，然后根據其結果確定使用哪種方法：
function stopEvent(evnt) {
if (evnt.stopPropagation) evnt.stopPropagation;
else evnt.cancelBubble = true;
}
//注：IE 7中調試出錯，提示信息 "stopPropagation為空或不是對象"。
5、事件句柄和 this
this關鍵字表示的是當前調用的函數或者方法的所有者。對于一個全局變量而言，它表示的就是 window對象。對于一個對象的方法而言，它表示的就是該對象實例。而在一個事件句柄中，它表示的就是接收到該事件的元素。
document.getElementById("first").onmousedown = function() {
alert(this); //在 Firefox中將輸出 "[object HTMLDivElement]"
alert("first element event");
}
6、DOM Level 2事件模型
對于堆棧內元素的事件處理，還有一種被稱為事件捕捉(event capturing)或 cascade-down的事件處理機制。對于前面這個包含3個元素的示例而言，事件將從最外面的元素開始觸發：window -> div1 -> div2。
老事件模型和新的 DOM Level 2事件模型之間，主要區別：
a.新事件模型并不依賴于特定的事件來處理屬性；
b.你可以對任何一個對象的任何一種事件注冊多個事件句柄函數。
新的事件句柄提供的3個方法：
addEventListener，添加一個事件監聽器；
removeEventListener，刪除一個事件監聽器；
dispatchEvent，分發一個新的事件。
示例：
object.addEventListener('event', eventFunction, boolean);
如 click或 load之類的事件是其第一參數；第二個參數是指定的事件句柄函數；第三個參數用來指定事件是以 cascade-down或者冒泡模式處理的。當第三個參數為 false時這個事件監聽器將以冒泡模式處理，否則將把這個事件監聽器改成事件捕捉模型。
function cascadeDown(evnt) {
alert("Capturing: " + this);
}
function bubbleUp(evnt) {
alert("Bubbling: " + this);
}
window.onload = setup;
function setup(evnt) {
//事件捕捉
document.addEventListener("click", cascadeDown, true);
document.forms[0].addEventListener("click", cascadeDown, true);
document.forms[0].elements[0].addEventListener("click", cascadeDown, true);
//事件冒泡
document.addEventListener("click", bubbleUp, false);
document.forms[0].addEventListener("click", bubbleUp, false);
document.forms[0].elements[0].addEventListener("click", bubbleUp, false);
}
/*
在 Firefox中，單擊按鈕將順序生成6個對話框
Capturing: [object HTMLDocument]
Capturing: [object HTMLFormElement]
Capturing: [object HTMLInputElement]
Bubbling: [object HTMLInputElement]
Bubbling: [object HTMLFormElement]
Bubbling: [object HTMLDocument]
*/
如果你想停止事件執行時，可以在函數中調用 stopPropagation方法：
function cascadeDown(evnt) {
...
evnt.stopPropagation();
}
如果要徹底刪除一個事件監聽器，可以使用 removeEventListener方法：
document.removeEventListener("click", cascadeDown, true);
在 IE中，與 addEventListener和 removeEventListener方法相似的是 attachEvent和 detachEvent，對應語法是：
object.attachEvent("eventhandler", function);
第一個參數是事件句柄，第二個是其函數。detachEvent語法類似。
跨瀏覽器解決方案：
window.onload = setup;
window.onunload = cleanup;
function setup(evnt) {
var evtObject = document.getElementById("clickme");
//檢查對象模型
if (evtObject.addEventListener) evtObject.addEventListener("click", clickMe, false);
else if (evtObject.attachEvent) evtObject.attachEvent("onclick", clickMe);
else if (evtObject.onclick) evtObject.onclick=clickMe;
}
/*清理
在 IE中，需要跟蹤 window的 unload事件，然后調用 detachEvent方法清理，釋放相應的內存
而 addEventListener方法使用的內存是無需清理的。
*/
function cleanup() {
var evtObject = document.getElementById("clickme");
if (evtObject.detachEvent) evtObject.detachEvent("onclick", clickMe);
}
function clickMe() {
alert("clickMe");
}
IE 屬性
除了上面的鼠標/事件屬性，IE 瀏覽器還支持下面的屬性：
| 屬性 |
描述 |
| cancelBubble |
如果事件句柄想阻止事件傳播到包容對象，必須把該屬性設為 true。 |
| fromElement |
對于 mouseover 和 mouseout 事件，fromElement 引用移出鼠標的元素。 |
| keyCode |
對于 keypress 事件，該屬性聲明了被敲擊的鍵生成的 Unicode 字符碼。對于 keydown 和 keyup 事件，它指定了被敲擊的鍵的虛擬鍵盤碼。虛擬鍵盤碼可能和使用的鍵盤的布局相關。 |
| offsetX,offsetY |
發生事件的地點在事件源元素的坐標系統中的 x 坐標和 y 坐標。 |
| returnValue |
如果設置了該屬性，它的值比事件句柄的返回值優先級高。把這個屬性設置為 fasle，可以取消發生事件的源元素的默認動作。 |
| srcElement |
對于生成事件的 Window 對象、Document 對象或 Element 對象的引用。 |
| toElement |
對于 mouseover 和 mouseout 事件，該屬性引用移入鼠標的元素。 |
| x,y |
事件發生的位置的 x 坐標和 y 坐標，它們相對于用CSS動態定位的最內層包容元素。 |
注：HTML DOM Event 對象 http://www.w3school.com.cn/htmldom/dom_obj_event.asp
標準 Event 屬性
下面列出了 2 級 DOM 事件標準定義的屬性。
注：HTML DOM Event 對象 http://www.w3school.com.cn/htmldom/dom_obj_event.asp
7、測驗
Q1：使用 DOM Level 0方法為 document的 click事件指定一個事件句柄函數。
A1：document.onclick = clickMe;
Q2：使用 DOM Level 2事件處理機制為 document添加 click事件句柄。
A2：document.addEventListener("click", clickMe, false);
Q3：如果使事件處理機制能安全運行所有瀏覽器？
A3：
if (evtObject.addEventListener) evtObject.addEventListener("click", clickMe, false);
else if (evtObject.attachEvent) evtObject.attachEvent("onclick", clickMe);
else if (evtObject.onclick) evtObject.onclick=clickMe;
Q4：對于為 document對象指定的 onclick事件句柄，如何知道是在屏幕的什么位置執行了單擊操作？
A4：
如果使用 DOM Level 0事件處理系統，那么將無法使用 window對象的 event對象，也不能將其作為參數傳給函數。
對于 DOM Level 2事件處理模型而言，event對象將會傳給事件句柄函數，你可以通過 event對象訪問其 screenX和 screenY屬性。
Q5：使用 DOM Level 2事件系統，如何阻止從其他元素中冒泡上來的事件。
A5：
IE所支持的方法和絕大多數瀏覽器所支持的方法有所不同，因此你需要分別支持 IE和其他瀏覽器。你可以檢查 event對象是否支持 stopPropagation方法。如果支持，則調用它；否則就將 cancelBubble屬性的值設置為 true。
Q7：捕獲 document對象的 keydown事件
A7：
window.onload = function() {
if (document.addEventListener) document.addEventListener("keydown", getKey, false);
else if (document.attachEvent) document.attachEvent("onkeydown", getKey);
else if (document.onkeydown) document.onkeydown=getKey;
}
function getKey(evnt) {
var theEvent = evnt ? evnt : window.event;
alert(theEvent.which); //Firefox 返回值，IE 7提示 undefined
}
posted on 2010-05-29 09:25
黃小二 閱讀(854)
評論(1) 編輯 收藏 所屬分類:
Ajax