我的位置: 首頁 > 學習專區 > JAVA技術 > Javascript事件模型

Javascript事件模型

2013-01-23 14:17:11

[導讀] 前幾天看dojo的文檔，其中多次提到DOM2事件模型，以前學習這部分的內容，主要憤慨于IE的不兼容性了，現在對于DOM2事件模型的概念又有

前幾天看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>

第一種賦值方式:

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;">helpa>

JS函數運行在詞法作用域中，也就是定義他們的作用域中，因此作為HTML性質的JS事件處理程序，作用域鏈比較特殊，其頭是調用對象(既這段JS代碼),下一個對象是觸發事件的對象既event.currentTarget,其后就是其包容層元素。整個作用域鏈的精確構成依賴于具體實現。

DOM2事件模型

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();