前幾天看dojo的文檔，其中多次提到DOM2事件模型，以前學(xué)習(xí)這部分的內(nèi)容，主要憤慨于IE的不兼容性了，現(xiàn)在對(duì)于DOM2事件模型的概念又有些模糊，所以翻出了JS權(quán)威指南(V4)又復(fù)習(xí)了一下，簡(jiǎn)單作一小結(jié)。
JS權(quán)威指南中將JS事件模型分為四種
1、原始事件模型:屬性事件處理模式
2、標(biāo)準(zhǔn)事件模型:DOM2對(duì)其作了標(biāo)準(zhǔn)化
3、IE事件模型(IE5.5\IE6)
4、 Netscape事件模型
也就是基本事件處理，其實(shí)我們大多數(shù)人使用的JS事件處理模式都是這種代碼方式。
其事件類(lèi)型:分為"輸入事件(如onclicki)"和"語(yǔ)義事件(如onsubmit)"
事件程序的注冊(cè)可以以下幾種方式:
1、JS代碼作為HTML性質(zhì)值
<input type="button" value="Press me" onclick="alert('thanks');"
2、事件處理程序作為JS屬性
附注：文檔中的每個(gè)HTML元素在文檔樹(shù)中都有一個(gè)相應(yīng)的JS對(duì)象，這個(gè)JS對(duì)象的屬性對(duì)應(yīng)于那個(gè)HTML元素的性質(zhì)，無(wú)論作為HTML性質(zhì)的JS代碼還是作為JS屬性的時(shí)間處理程序，其本身的屬性都是函數(shù)"function".
作為JS屬性的例子：
html背景：
<form name="f1">
<input name="b1" type="button" value="Press Me"/>
</form>
第一種賦值方式:
document.f1.b1.onclick=function()
{
alert('thanks');
};
第二種賦值方式:
function plead()
{
window.status="Please Press Me!";
}
document.f1.bi.onmouseover=plead;
作為JS屬性的事件處理程序可以用JS屬性顯式調(diào)用
document.myfrom.onsubmit();
事件處理程序可以返回fale來(lái)阻止瀏覽器執(zhí)行事件的默認(rèn)動(dòng)作，常用的如對(duì)onsubmit的操作。例外是
對(duì)超鏈接mouseover的window.status顯示事件的阻擋，是返回true.例如:
<a href="help.htm" onmouseover="window.status='help';return true;">help</a>
JS函數(shù)運(yùn)行在詞法作用域中，也就是定義他們的作用域中，因此作為HTML性質(zhì)的JS事件處理程序，作用域鏈比較特殊，其頭是調(diào)用對(duì)象(既這段JS代碼),下一個(gè)對(duì)象是觸發(fā)事件的對(duì)象既event.currentTarget,其后就是其包容層元素。整個(gè)作用域鏈的精確構(gòu)成依賴(lài)于具體實(shí)現(xiàn)。
DOM2的模型提高的復(fù)雜度:
1、首先它的事件模型中引入了傳播過(guò)程：1）先由document向目標(biāo)對(duì)象傳播稱(chēng)之為：捕捉階段；2）目標(biāo)對(duì)象的事件處理程序運(yùn)行，3）從目標(biāo)對(duì)象向document起泡。Event.stopPropagation()可以停止傳播，preventDefault可以阻止事件的默認(rèn)動(dòng)作（想想以前的return false）。
2、事件處理程序注冊(cè)：EventTarget.addEventListensr(String type,EcentListener listener,blooean useCapure).其中第三個(gè)參數(shù)決定注冊(cè)程序在傳播的那個(gè)過(guò)程被調(diào)用，true:在捕捉階段調(diào)用，false:在后兩個(gè)階段被調(diào)用。
3、DOM2還支持JAVA式的對(duì)象式事件處理程序注冊(cè),用的少，略。
4、事件模塊和事件類(lèi)型：根據(jù)事件語(yǔ)義和特性做分類(lèi)
5、合成事件，即由JS代碼模擬事件發(fā)生(適用于Test代碼):它分為以下三個(gè)步驟：
1）創(chuàng)建合適的事件對(duì)象:
var e=document.createEvent("HTMLEvents");
2)初始化事件對(duì)象域(即:屬性)
e.initEcent("click","true","true");
3)分派事件對(duì)象：
eventTarget.dispatchEvent();
:
特點(diǎn)：
1、傳播過(guò)程只起泡，不捕捉。起泡中斷方法：
window.ecent.cancelBubble=true;
2、Event對(duì)象不是事件處理程序的函數(shù)參數(shù)，而是window的全局變量。
3、事件注冊(cè)函數(shù):attachEvent()和反注冊(cè)：detachEvent().
由于Netscape好像已經(jīng)完全停止開(kāi)發(fā)，所以就不詳述了，簡(jiǎn)單的說(shuō)：就是只捕捉不起泡。
后話(huà)：DOM2事件模型的主要實(shí)現(xiàn)者應(yīng)該是FireFox、Opera。不過(guò)就事件注冊(cè)的標(biāo)準(zhǔn)度上，Opera實(shí)現(xiàn)的好象更嚴(yán)格一點(diǎn)。參見(jiàn)《關(guān)于DOM事件模型的兩件事》http://www.marchbox.com/blog/2-things-about-dom-events-model/
posted on 2008-01-08 10:58
朝暉 閱讀(4844)
評(píng)論(2) 編輯 收藏 所屬分類(lèi):
JS