利用js實作事件處理模型

本篇文章主要介紹了利用js實現事件處理模型，對初學這具有一定的參考價值，有興趣的夥伴們可以參考一下。

在各種瀏覽器中存在四個事件模型：原始事件模型、標準事件模型、IE事件模型，還有一個Netscape4事件模型，以下具體介紹一下。

1、目前共存在四種事件處理模型分別是：原始事件模型、標準事件模型、IE事件模型，還有一種Netscape4事件模型，但基本上可忽略

2、事件處理模型可分為基本事件處理與高階事件處理兩種，原始事件模型屬於基本事件處理，標準事件模型與IE事件模型屬於高階事件處理

一、基本事件處理：

基本事件處理主要是指原始事件模型實現的事件處理。其主要分為以下兩種：

（1）、作為HTML標籤性質的事件處理，如

… p>           //在這裡，而onmouseover只是一個代表，也包含其他很多事件

在這種方式中，賦給onmouseover等事件處理函數的是JS代碼串，系統會把這些代碼串自動包裝在一個匿名函數中。其中可以有this關鍵字，它指向的是這個標籤元素，也可以有event關鍵字，它表示的是事件發生時的事件物件（用在標準瀏覽器中）。如

……

 其實我們可以把onmouseover等看成是一個函數，在沒給它賦值前，它就是一個空函數。給它賦了js程式碼後，就等於往空函數裡加入了程式碼。因為onmouseover等其實是一個函數，所以我們可以顯示的呼叫它，例如 element.onmouseover(),但這樣並不會引起mouseover事件的真正發生。

可以給事件函數（即onmoouseover等）回傳false來舉止預設動作的發生。

函數是運行在定義它的作用域中，因此如果給事件處理函數賦值js程式碼，就相當於在這個HTML標籤環境中定義了一個函數，這種環境比較特殊，它的高一級的作用域並不是window全域物件環境，在這兩者之間還相隔這至少一種作用域環境。而在<script>中定義的函數，它的高一級作用域環境就是window(當然巢狀函數又要另當別論)。所以，在HTML標籤中，最好把程式碼放在一個在<script>中定義的函數裡，然後再把這個函數呼叫賦給事件函數,即<p onmouseover=“function();”> ……</script>

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

注意在這種方式，不能再給事件處理函數賦值js程式碼串了，而是直接把函數（不是函數呼叫）賦給它，或是賦一個匿名函數，如element.onmouseover=function(){…}  或    element.onmouseover=f； f為一個函數，這裡不能加上括號

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

 二、高階事件處理：

高階事件處理只要是指標準事件模型和IE事件模型實現的事件處理。

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

捕獲傳播：即事件從外傳到裡，每一級都發生了該事件

冒泡傳播；即事件從裡傳到外，每一級都發生了該事件，並不是所有的事件都會冒泡

（1）標準事件模型

標準事件模型既能發生冒泡傳播也能發生捕獲傳播。

【 事件註冊函數】

addEventListener() 此方法為特定元素註冊事件處理程序，有三個參數，第一個參數是事件名，注意沒有前綴on，第二個是處理函數（當然也可以是匿名函數），事件發生時，系統會自動給該函數的第一個參數傳入一個Event物件。最後一個參數是布林值，如果為true,則只用於事件捕獲傳播階段，如果為false則只用於事件冒泡傳播階段，一般我們把它設為false

例如：element. addEventListener(“click”,f,false)    //其中f為函數

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

高階事件處理的一大優點是可以為同一個元素註冊多個事件處理函數，這些事件函數執行的順序並不能確定，但一般來說是依照註冊的先後順序來執行，如果註冊了重複的事件函數，則只有第一個會生效。

removeEventListener() 此方法用來解除事件註冊，它的三個參數與addEventListener() 相同

 （2）IE事件模型

# IE事件模型只支援事件冒泡傳播

【 事件註冊函數】

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

 IE事件模型的Event對象並不是作為事件發生時做為參數傳入事件處理函數的，IE的Event對像是window的全域對象，只有在事件發生時才可以存取。

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

detachEvent()  此方法用來取消事件註冊，參數與attacthEvent()  相同

 addEventListener() 與attacthEvent()  的一個重要差異是attacthEvent()註冊的事件處理函數中的this關鍵字永遠是指向window物件的，而指向window物件() 註冊的事件處理函數中的this指向的是發生了事件的元素

 （3）、IE與標準事件模型的Event物件比較

# #altKeytrue表示按下了ALT鍵，false表示沒有滑鼠事件。 0表示沒有按下滑鼠鍵，1為按下左鍵，2為按下右鍵，4為中間鍵，3為同時按下左右鍵，5為按下左鍵和中鍵，6為按下右鍵和中鍵，7為按下左鍵、中鍵、右鍵button事件發生時，滑鼠在瀏覽器視窗（不包含工具列、捲軸等）的X座標## #  取得事件發生時滑鼠相對於引起事件的元素的X座標，即以引起事件的元素的本身（不用計算padding和margin)的左上角為原點        當引發事件的元素沒有動態定位時，則返回滑鼠相對於引發事件的元素的最近的一個設定了動態定位的父元素裡的X座標，以其父元素的邊框的左上角為原點。 取得滑鼠相對於引發事件的元素的最近一個設定了動態定位的父元素的X座標，以該父元素的邊框i的坐上角為原點  

IE 事件物件	#IE事件物件	標準事件物件	標準事件物件
		##altKey
# true表示按下了ALT鍵。 false表示沒有	ctrlKey	#true表示按下了CTRL鍵，false表示沒有	#ctrlKey
true表示按下了CTRL鍵，false表示沒有		shiftKey	true表示按下了SHIFT鍵，false表示沒有
按下了SHIFT鍵，false表示沒有		button
#0為左鍵，1為中鍵，2為右鍵	clientX	事件發生時，滑鼠在瀏覽器視窗（不包含工具列、捲軸等）的X座標	clientX
clientY	同上	clientY	同上
screenX	事件發生時，滑鼠在整個螢幕上的X座標	screenX	事件發生時，滑鼠在整個螢幕上的X座標
#screenY	##同上	screenY	同上
##type ######事件的名稱（如click)############type############事件的名稱(如click)### ###############srcElement#####	引起事件的元素	target	會引起事件的元素
#keyCode	對於keypress事件，表示按鈕的unicode字符，對於keydown和keyup事件則表示按鈕的數字代碼	charCode	表示按鍵的Unicode字元
		keyCode	表示按鍵的數字代碼
#cancelBubble	值為true時將會阻止事件繼續往上冒泡	stopPropagation	#可以呼叫這個方法來阻止事件繼續往上冒泡
		cancelBubble	true表示事件冒泡已取消，false表示沒有
returnValue	#值為false時將會阻止事件的預設行為	preventDefault()	呼叫該方法可以阻止事件的預設行為
offsetX		layerX	當引發事件的元素設定了動態定位後，則傳回滑鼠相對於引發事件的元素的X座標，以此元素邊界的左上角為原點。
x

#上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

如何使用JSON 

#js 透過html()及text( )方法取得並設定p標籤的顯示值

JS三種載入方法使用總結
#

以上是利用js實作事件處理模型的詳細內容。更多資訊請關注PHP中文網其他相關文章！