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