在各種瀏覽器中存在四種事件模型：原始事件模型、標(biāo)準(zhǔn)事件模型、IE事件模型，還有一種Netscape4事件模型，下面具體介紹一下。

1、目前共存在四種事件處理模型分別是：原始事件模型、標(biāo)準(zhǔn)事件模型、IE事件模型，還有一種Netscape4事件模型，但基本可忽略

2、事件處理模型又可以分為基本事件處理和高級(jí)事件處理兩種，原始事件模型屬于基本事件處理，標(biāo)準(zhǔn)事件模型和IE事件模型屬于高級(jí)事件處理

一、基本事件處理：

基本事件處理主要是指原始事件模型實(shí)現(xiàn)的事件處理。其主要分為以下兩種：

（1）、作為HTML標(biāo)簽性質(zhì)的事件處理，比如 <div onmouseover=”var a=1; alert();”>……</div>           //在這里，onmouseover只是一個(gè)代表，還包含其他很多事件

在這種方式中，賦給onmouseover等事件處理函數(shù)的是JS代碼串，系統(tǒng)會(huì)把這些代碼串自動(dòng)包裝在一個(gè)匿名函數(shù)中。其中可以有this關(guān)鍵字，它指向的是這個(gè)標(biāo)簽元素，也可以有event關(guān)鍵字，它表示的是事件發(fā)生時(shí)的事件對象（用在標(biāo)準(zhǔn)瀏覽器中）。如<div onmouseover=”f(this,event);”>……</div>

 其實(shí)我們可以把onmouseover等看成是一個(gè)函數(shù)，在沒給它賦值前，它就是一個(gè)空函數(shù)。給它賦了js代碼后，就相當(dāng)于往空函數(shù)里添加了代碼。因?yàn)閛nmouseover等其實(shí)是一個(gè)函數(shù)，所以我們可以顯示的調(diào)用它，例如 element.onmouseover(),但這樣并不會(huì)引起mouseover事件的真正發(fā)生。

可以給事件函數(shù)（即onmoouseover等）返回false來舉止默認(rèn)動(dòng)作的發(fā)生。

函數(shù)是運(yùn)行在定義它的作用域中，因此如果給事件處理函數(shù)賦值js代碼，就相當(dāng)于是在這個(gè)HTML標(biāo)簽環(huán)境中定義了一個(gè)函數(shù)，這種環(huán)境比較特殊，它的高一級(jí)的作用域并不是window全局對象環(huán)境，在這兩者之間還相隔這至少一種作用域環(huán)境。而在<script>中定義的函數(shù)，它的高一級(jí)作用域環(huán)境就是window(當(dāng)然嵌套函數(shù)又要另當(dāng)別論)。所以，在HTML標(biāo)簽中，最好把代碼放在一個(gè)在<script>中定義的函數(shù)里，然后再把這個(gè)函數(shù)調(diào)用賦給事件函數(shù),即<div onmouseover=“function();”>……</div>

(2)、作為javascript屬性的事件處理    比如element.onmouseover=function(){……}

注意在這種方式，不能再給事件處理函數(shù)賦值js代碼串了，而是直接把函數(shù)（不是函數(shù)調(diào)用）賦給它，或是賦一個(gè)匿名函數(shù)，如 element.onmouseover=function(){……}  或    element.onmouseover=f； f為一個(gè)函數(shù)，在這里不能加上括號(hào)

基本事件處理也會(huì)以冒泡的形式向上傳播

 二、高級(jí)事件處理：

高級(jí)事件處理只要是指標(biāo)準(zhǔn)事件模型和IE事件模型實(shí)現(xiàn)的事件處理。

【概念理解】 事件的傳播可分兩種：一種是捕獲傳播，一種是冒泡傳播。

捕獲傳播：即事件從外傳到里，每一級(jí)都發(fā)生了該事件

冒泡傳播；即事件從里傳到外，每一級(jí)都發(fā)生了該事件，并不是所有的事件都會(huì)冒泡

（1）標(biāo)準(zhǔn)事件模型

標(biāo)準(zhǔn)事件模型既能發(fā)生冒泡傳播也能發(fā)生捕獲傳播。

【 事件注冊函數(shù)】

addEventListener() 該方法為特定元素注冊事件處理程序，有三個(gè)參數(shù)，第一個(gè)參數(shù)是事件名，注意沒有前綴on，第二個(gè)是處理函數(shù)（當(dāng)然也可以是匿名函數(shù)），事件發(fā)生時(shí)，系統(tǒng)會(huì)自動(dòng)給該函數(shù)的第一個(gè)參數(shù)傳入一個(gè)Event對象。最后一個(gè)參數(shù)是布爾值，如果為true,則只用于事件捕獲傳播階段，如果為false則只用于事件冒泡傳播階段，一般我們把它設(shè)為false

例如：element.addEventListener(“click”,f,false)    //其中f為一個(gè)函數(shù)

f函數(shù)可以這樣定義：function f(e){……}  //其中的參數(shù)在事件發(fā)生時(shí)就代表Event對象

高級(jí)事件處理的一大優(yōu)勢是可以給同一個(gè)元素注冊多個(gè)事件處理函數(shù)，這些事件函數(shù)執(zhí)行的順序并不能確定，但一般來說是按注冊的先后順序來執(zhí)行，如果注冊了重復(fù)的事件函數(shù)，則只有第一個(gè)會(huì)生效。

removeEventListener() 該方法用來解除事件注冊，它的三個(gè)參數(shù)與addEventListener() 相同

 （2）IE事件模型

 IE事件模型只支持事件冒泡傳播

【 事件注冊函數(shù)】

attacthEvent()  該方法只有2個(gè)參數(shù)，一個(gè)為事件名，注意有前綴on，第二個(gè)為事件處理函數(shù)。例如 element.attachEvent(“onclick”,f)

 IE事件模型的Event對象并不是作為事件發(fā)生時(shí)做為參數(shù)傳入事件處理函數(shù)的，IE的Event對象是一個(gè)window的全局對象，只有在事件發(fā)生時(shí)才可以訪問。

所以f函數(shù)可以這樣定義：  function f(){var e=window.event;……}   //其中e就取得了Event對象

detachEvent()  該方法用來取消事件注冊，參數(shù)與attacthEvent()  相同

 addEventListener() 與attacthEvent()  的一個(gè)重要差別是attacthEvent()注冊的事件處理函數(shù)中的this關(guān)鍵字永遠(yuǎn)是指向window對象的，而addEventListener() 注冊的事件處理函數(shù)中的this指向的是發(fā)生了事件的元素

 （3）、IE與標(biāo)準(zhǔn)事件模型的Event對象比較

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論