欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js學(xué)習(xí)筆記之事件處理模型

 更新時(shí)間:2016年10月31日 09:20:40   作者:無(wú)雙  
本篇文章主要介紹了js學(xué)習(xí)筆記之事件處理模型,對(duì)初學(xué)這具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。

在各種瀏覽器中存在四種事件模型:原始事件模型、標(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í)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • Javascript 基礎(chǔ)---Ajax入門(mén)必看

    Javascript 基礎(chǔ)---Ajax入門(mén)必看

    下面小編就為大家?guī)?lái)一篇Javascript 基礎(chǔ)---Ajax入門(mén)必看。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-07-07
  • javascript 注釋代碼的幾種方法總結(jié)

    javascript 注釋代碼的幾種方法總結(jié)

    為了程序/代碼的易讀性,基本上每一種編程語(yǔ)言都有注釋的功能,javascript也不例外,javascript注釋代碼有多種形式,本文章向大家介紹javascript注釋代碼的兩種方法,需要的朋友可以參考一下
    2017-01-01
  • 了解前端理論:rscss和rsjs

    了解前端理論:rscss和rsjs

    在前端開(kāi)發(fā)中,我們會(huì)嘗試去定一些規(guī)則和約定,來(lái)讓項(xiàng)目質(zhì)量更高,更易于維護(hù)。而對(duì)于這些規(guī)則和約定,我們也會(huì)希望它內(nèi)容簡(jiǎn)單,容易理解。下面小編來(lái)和大家一起學(xué)習(xí)一下
    2019-05-05
  • JavaScript之編碼規(guī)范 推薦

    JavaScript之編碼規(guī)范 推薦

    JavaScript是一種語(yǔ)法靈活,簡(jiǎn)單易懂的腳本語(yǔ)言。正因?yàn)殪`活,因此很多人在編寫(xiě)代碼時(shí),顯得很隨意,這就導(dǎo)致后期的修改、擴(kuò)展和維護(hù)變得異常困難。遵循統(tǒng)一的編碼規(guī)范,不僅對(duì)C++和Java這種編譯型語(yǔ)言很重要,對(duì)JavaScript腳本語(yǔ)言也同樣如此
    2012-05-05
  • JavaScript基礎(chǔ)知識(shí)學(xué)習(xí)筆記

    JavaScript基礎(chǔ)知識(shí)學(xué)習(xí)筆記

    本文是初學(xué)javascript的時(shí)候記的學(xué)習(xí)筆記,簡(jiǎn)單介紹了javascript的定義及用法,并附上示例,適合初學(xué)者們,老鳥(niǎo)請(qǐng)出門(mén)左轉(zhuǎn)。
    2014-12-12
  • setTimeout和setInterval的深入理解

    setTimeout和setInterval的深入理解

    以前寫(xiě)的setTimeout和setInterval的文章有些不足之處,今天抽時(shí)間整理了一下,要想真正理解還得從javascript的單線程機(jī)制說(shuō)起
    2013-11-11
  • 30分鐘就入門(mén)的正則表達(dá)式基礎(chǔ)教程

    30分鐘就入門(mén)的正則表達(dá)式基礎(chǔ)教程

    30分鐘內(nèi)讓你明白正則表達(dá)式是什么,并對(duì)它有一些基本的了解,讓你可以在自己的程序或網(wǎng)頁(yè)里使用它。
    2013-02-02
  • 詳解javascript設(shè)計(jì)模式三:代理模式

    詳解javascript設(shè)計(jì)模式三:代理模式

    這篇文章主要介紹了javascript設(shè)計(jì)模式三:代理模式,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • JavaScript中的setUTCDate()方法使用詳解

    JavaScript中的setUTCDate()方法使用詳解

    這篇文章主要介紹了JavaScript中的setUTCDate()方法使用詳解,是JS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下
    2015-06-06
  • javascript實(shí)現(xiàn)計(jì)算器功能詳解流程

    javascript實(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

最新評(píng)論