js學(xué)習(xí)筆記之事件處理模型
在各種瀏覽器中存在四種事件模型:原始事件模型、標準事件模型、IE事件模型,還有一種Netscape4事件模型,下面具體介紹一下。
1、目前共存在四種事件處理模型分別是:原始事件模型、標準事件模型、IE事件模型,還有一種Netscape4事件模型,但基本可忽略
2、事件處理模型又可以分為基本事件處理和高級事件處理兩種,原始事件模型屬于基本事件處理,標準事件模型和IE事件模型屬于高級事件處理
一、基本事件處理:
基本事件處理主要是指原始事件模型實現(xiàn)的事件處理。其主要分為以下兩種:
(1)、作為HTML標簽性質(zhì)的事件處理,比如 <div onmouseover=”var a=1; alert();”>……</div> //在這里,onmouseover只是一個代表,還包含其他很多事件
在這種方式中,賦給onmouseover等事件處理函數(shù)的是JS代碼串,系統(tǒng)會把這些代碼串自動包裝在一個匿名函數(shù)中。其中可以有this關(guān)鍵字,它指向的是這個標簽元素,也可以有event關(guān)鍵字,它表示的是事件發(fā)生時的事件對象(用在標準瀏覽器中)。如<div onmouseover=”f(this,event);”>……</div>
其實我們可以把onmouseover等看成是一個函數(shù),在沒給它賦值前,它就是一個空函數(shù)。給它賦了js代碼后,就相當(dāng)于往空函數(shù)里添加了代碼。因為onmouseover等其實是一個函數(shù),所以我們可以顯示的調(diào)用它,例如 element.onmouseover(),但這樣并不會引起mouseover事件的真正發(fā)生。
可以給事件函數(shù)(即onmoouseover等)返回false來舉止默認動作的發(fā)生。
函數(shù)是運行在定義它的作用域中,因此如果給事件處理函數(shù)賦值js代碼,就相當(dāng)于是在這個HTML標簽環(huán)境中定義了一個函數(shù),這種環(huán)境比較特殊,它的高一級的作用域并不是window全局對象環(huán)境,在這兩者之間還相隔這至少一種作用域環(huán)境。而在<script>中定義的函數(shù),它的高一級作用域環(huán)境就是window(當(dāng)然嵌套函數(shù)又要另當(dāng)別論)。所以,在HTML標簽中,最好把代碼放在一個在<script>中定義的函數(shù)里,然后再把這個函數(shù)調(diào)用賦給事件函數(shù),即<div onmouseover=“function();”>……</div>
(2)、作為javascript屬性的事件處理 比如element.onmouseover=function(){……}
注意在這種方式,不能再給事件處理函數(shù)賦值js代碼串了,而是直接把函數(shù)(不是函數(shù)調(diào)用)賦給它,或是賦一個匿名函數(shù),如 element.onmouseover=function(){……} 或 element.onmouseover=f; f為一個函數(shù),在這里不能加上括號
基本事件處理也會以冒泡的形式向上傳播
二、高級事件處理:
高級事件處理只要是指標準事件模型和IE事件模型實現(xiàn)的事件處理。
【概念理解】 事件的傳播可分兩種:一種是捕獲傳播,一種是冒泡傳播。
捕獲傳播:即事件從外傳到里,每一級都發(fā)生了該事件
冒泡傳播;即事件從里傳到外,每一級都發(fā)生了該事件,并不是所有的事件都會冒泡
(1)標準事件模型
標準事件模型既能發(fā)生冒泡傳播也能發(fā)生捕獲傳播。
【 事件注冊函數(shù)】
addEventListener() 該方法為特定元素注冊事件處理程序,有三個參數(shù),第一個參數(shù)是事件名,注意沒有前綴on,第二個是處理函數(shù)(當(dāng)然也可以是匿名函數(shù)),事件發(fā)生時,系統(tǒng)會自動給該函數(shù)的第一個參數(shù)傳入一個Event對象。最后一個參數(shù)是布爾值,如果為true,則只用于事件捕獲傳播階段,如果為false則只用于事件冒泡傳播階段,一般我們把它設(shè)為false
例如:element.addEventListener(“click”,f,false) //其中f為一個函數(shù)
f函數(shù)可以這樣定義:function f(e){……} //其中的參數(shù)在事件發(fā)生時就代表Event對象
高級事件處理的一大優(yōu)勢是可以給同一個元素注冊多個事件處理函數(shù),這些事件函數(shù)執(zhí)行的順序并不能確定,但一般來說是按注冊的先后順序來執(zhí)行,如果注冊了重復(fù)的事件函數(shù),則只有第一個會生效。
removeEventListener() 該方法用來解除事件注冊,它的三個參數(shù)與addEventListener() 相同
(2)IE事件模型
IE事件模型只支持事件冒泡傳播
【 事件注冊函數(shù)】
attacthEvent() 該方法只有2個參數(shù),一個為事件名,注意有前綴on,第二個為事件處理函數(shù)。例如 element.attachEvent(“onclick”,f)
IE事件模型的Event對象并不是作為事件發(fā)生時做為參數(shù)傳入事件處理函數(shù)的,IE的Event對象是一個window的全局對象,只有在事件發(fā)生時才可以訪問。
所以f函數(shù)可以這樣定義: function f(){var e=window.event;……} //其中e就取得了Event對象
detachEvent() 該方法用來取消事件注冊,參數(shù)與attacthEvent() 相同
addEventListener() 與attacthEvent() 的一個重要差別是attacthEvent()注冊的事件處理函數(shù)中的this關(guān)鍵字永遠是指向window對象的,而addEventListener() 注冊的事件處理函數(shù)中的this指向的是發(fā)生了事件的元素
(3)、IE與標準事件模型的Event對象比較
IE 事件對象 |
IE事件對象 |
標準事件對象 |
標準事件對象 |
altKey |
true表示按下了ALT鍵,false表示沒有 |
altKey |
true表示按下了ALT鍵。false表示沒有 |
ctrlKey |
true表示按下了CTRL鍵,false表示沒有 |
ctrlKey |
true表示按下了CTRL鍵,false表示沒有 |
shiftKey |
true表示按下了SHIFT鍵,false表示沒有 |
shiftKey |
true表示按下了SHIFT鍵,false表示沒有 |
button |
鼠標事件。0表示沒有按下鼠標鍵,1為按下左鍵,2為按下右鍵,4為中間鍵,3為同時按下左右鍵,5為按下左鍵和中鍵,6為按下右鍵和中鍵,7為按下左鍵、中鍵、右鍵 |
button |
0為左鍵,1為中鍵,2為右鍵 |
clientX |
事件發(fā)生時,鼠標在瀏覽器窗口(不包含工具欄、滾動條等)的X坐標 |
clientX |
事件發(fā)生時,鼠標在瀏覽器窗口(不包含工具欄、滾動條等)的X坐標 |
clientY |
同上 |
clientY |
同上 |
screenX |
事件發(fā)生時,鼠標在整個屏幕上的X坐標 |
screenX |
事件發(fā)生時,鼠標在整個屏幕上的X坐標 |
screenY |
同上 |
screenY |
同上 |
type |
事件的名稱(如click) |
type |
事件的名稱(如click) |
srcElement |
引起事件的元素 |
target |
引起事件的元素 |
keyCode |
對于keypress事件,表示按鈕的unicode字符,對于keydown和keyup事件則表示按鈕的數(shù)字代碼 |
charCode |
表示按鍵的Unicode字符 |
keyCode |
表示按鍵的數(shù)字代碼 |
||
cancelBubble |
值為true時將阻止事件繼續(xù)向上冒泡 |
stopPropagation |
可以調(diào)用這個方法來阻止事件繼續(xù)向上冒泡 |
cancelBubble |
true表示事件冒泡已被取消,false表示沒有 |
||
returnValue |
值為false時將會阻止事件的默認行為 |
preventDefault() |
調(diào)用該方法可以阻止事件的默認行為 |
offsetX |
獲取事件發(fā)生時鼠標相對于引起事件的元素的X坐標,即以引起事件的元素的本身(不用計算padding和margin)的左上角為原點 |
layerX |
當(dāng)引發(fā)事件的元素沒有動態(tài)定位時,返回鼠標相對于引發(fā)事件的元素的最近的一個設(shè)置了動態(tài)定位的父元素里的X坐標,以其父元素的邊框的左上角為原點。 當(dāng)引發(fā)事件的元素設(shè)置了動態(tài)定位后,則返回鼠標相對于引發(fā)事件的元素的X坐標,以該元素邊界的左上角為原點。 |
x |
獲取鼠標相對于引發(fā)事件的元素的最近一個設(shè)置了動態(tài)定位的父元素的X坐標,以該父元素的邊框i的坐上角為原點 |
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 在html中引入外部js文件,并調(diào)用帶參函數(shù)的方法
- python 把數(shù)據(jù) json格式輸出的實例代碼
- jsp 網(wǎng)站引入外部css或者js失效問題解決
- 原生js代碼實現(xiàn)圖片放大境效果
- js模式化窗口問題![window.dialogArguments]
- JS給Array添加是否包含字符串的簡單方法
- 淺談js對象屬性 通過點(.) 和方括號([]) 的不同之處
- 淺談js繼承的實現(xiàn)及公有、私有、靜態(tài)方法的書寫
- js基礎(chǔ)之DOM中document對象的常用屬性方法詳解
- Javascript 動態(tài)改變imput type屬性
相關(guān)文章
JavaScript基礎(chǔ)知識學(xué)習(xí)筆記
本文是初學(xué)javascript的時候記的學(xué)習(xí)筆記,簡單介紹了javascript的定義及用法,并附上示例,適合初學(xué)者們,老鳥請出門左轉(zhuǎn)。2014-12-12JavaScript中的setUTCDate()方法使用詳解
這篇文章主要介紹了JavaScript中的setUTCDate()方法使用詳解,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06