javascript事件模型介紹

更新時(shí)間：2016年05月31日 09:49:18 作者：zqstc

在各種瀏覽器中存在三種事件模型:原始事件模型( original event model),DOM2事件模型,IE事件模型.其中原始的事件模型被所有瀏覽器所支持,而DOM2中所定義的事件模型目前被除了IE以外的所有主流瀏覽器支持。

一、原始事件模型

其事件類型:分為"輸入事件(如onclicki)"和"語(yǔ)義事件(如onsubmit)"

事件程序的注冊(cè)可以以下幾種方式:

1、JS代碼作為HTML性質(zhì)值

復(fù)制代碼代碼如下:

<input type="button" value="Press me" onclick="alert('thanks');"

2、事件處理程序作為JS屬性

附注：文檔中的每個(gè)HTML元素在文檔樹中都有一個(gè)相應(yīng)的JS對(duì)象，這個(gè)JS對(duì)象的屬性對(duì)應(yīng)于那個(gè)HTML元素的性質(zhì)，無(wú)論作為HTML性質(zhì)的JS代碼還是作為JS屬性的時(shí)間處理程序，其本身的屬性都是函數(shù)"function".

復(fù)制代碼代碼如下:

<form name="f1">

<input name="b1" type="button" value="Press Me"/>

</form>

第一種賦值方式:

復(fù)制代碼代碼如下:

document.f1.b1.onclick=function(){alert('thanks');};

第二種賦值方式:

復(fù)制代碼代碼如下:

function plead(){window.status="Please Press Me!";}

document.f1.bi.onmouseover=plead;

作為JS屬性的事件處理程序可以用JS屬性顯式調(diào)用

復(fù)制代碼代碼如下:

document.myfrom.onsubmit();

事件處理程序可以返回fale來(lái)阻止瀏覽器執(zhí)行事件的默認(rèn)動(dòng)作，常用的如對(duì)onsubmit的操作。例外是
對(duì)超鏈接mouseover的window.status顯示事件的阻擋，是返回true.例如:

復(fù)制代碼代碼如下:

二、DOM2事件模型

這個(gè)模型參考了IE的氣泡模型而制定的,它是由w3c制定的規(guī)范.在原始模型中事件一旦發(fā)生就直接調(diào)用事件句柄,沒(méi)有其它的事件傳播過(guò)程.而在DOM2模型中事件有一個(gè)特殊的傳播過(guò)程,分為三個(gè)階段:

(1)capturing phase:事件被從document一直向下傳播到目標(biāo)元素,在這過(guò)程中如果有哪個(gè)祖先元素對(duì)該事件感興趣可以注冊(cè)自己的處理函數(shù).

(2)target phase:事件到達(dá)目標(biāo)元素,執(zhí)行目標(biāo)元素的事件處理函數(shù).

(3)bubbling phase:事件從目標(biāo)元素上升一直到達(dá)document,雖然所有的事件類型都會(huì)經(jīng)歷captruing phase階段但是只有部分事件會(huì)經(jīng)歷bubbling phase階段,例如submit事件就不會(huì)被上浮.
在整個(gè)的事件傳播過(guò)程中可以調(diào)用event.stopPropagation()來(lái)停止事件的傳播,調(diào)用preventDefault()來(lái)阻止瀏覽器的默認(rèn)行為.

復(fù)制代碼代碼如下:

addEventListener("eventType","handler","true!false");

removeEventListner("eventType","handler","true!false");

三、IE模型

IE模型也提供了一個(gè)event對(duì)象封裝了事件的詳細(xì)信息,但是IE不把該對(duì)象傳入事件處理函數(shù),由于在任意時(shí)刻只會(huì)存在一個(gè)事件,所以IE把它作為全局對(duì)象window的一個(gè)屬性,IE中的事件傳播模式對(duì)應(yīng)于DOM2的第二和第三階段,首先執(zhí)目標(biāo)元素的處理函數(shù),然后向上傳播到達(dá)document,ie中只能能捕捉鼠標(biāo)事件,而DOM2中可以捕捉所有的事件,IE中注冊(cè)和刪除事件處理函數(shù)的方法也不同于DOM2.

事件處理函數(shù)的注冊(cè)和刪除是通過(guò)元素的attachEvent("eventType","handler") and detachEvent("eventType","handler" ),與dom2不同的是eventType有on前綴

特點(diǎn)：
1、傳播過(guò)程只起泡，不捕捉。起泡中斷方法：
window.ecent.cancelBubble=true;
2、Event對(duì)象不是事件處理程序的函數(shù)參數(shù)，而是window的全局變量。
3、事件注冊(cè)函數(shù):attachEvent()和反注冊(cè)：detachEvent().

四、Netscape4事件模型

由于Netscape好像已經(jīng)完全停止開發(fā)，所以就不詳述了，簡(jiǎn)單的說(shuō)：就是只捕捉不起泡。

以上就是javascript事件模型基本的介紹，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: