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