基于新信息技術(shù)的jQuery開發(fā)基礎(chǔ)教程課件：jQuery中的事件

jQuery中的事件制作頁面登錄模塊4.1jQuery加載事件4.2jQuery事件綁定4.3合成事件4.4事件冒泡4.5事件捕獲4.6

移除事件4.7模擬操作單元總結(jié)

4.1jQuery加載事件

在編寫JavaScript代碼時(shí)，我們通常會(huì)在頁面加載完成時(shí)對元素做一些初始化操作，而這些初始化操作需要頁面全部加載完畢后才執(zhí)行，否則可能代碼運(yùn)行時(shí)頁面上的元素還沒有生成。在原生JavaScript中，通常使用window.onload方法，而在jQuery中，使用的是$(document).ready()方法。

4.1.1$(document).ready()方法

$(document).ready()方法是在文檔加載后激活的函數(shù)。當(dāng)DOM(文檔對象模型)已經(jīng)加載，并且頁面(包括圖像)已經(jīng)完全呈現(xiàn)時(shí)，會(huì)發(fā)生ready事件。由于該事件在文檔就緒后發(fā)生，因此把所有其他的jQuery事件和函數(shù)置于該事件中是非常好的做法。而$(document).ready()方法是ready事件發(fā)生時(shí)執(zhí)行的代碼，此方法僅能用于當(dāng)前文檔，因此無需選擇器。語法如下：

4.1.2$(document).ready()與window.onload的區(qū)別

$(document).ready()與window.onload有類似的作用，但是也有細(xì)微區(qū)別，列舉如下。

1.?執(zhí)行時(shí)機(jī)

window.onload方法是在網(wǎng)頁中所有的元素(包括元素的所有關(guān)聯(lián)文件)完全加載到瀏覽器后才執(zhí)行，即JavaScript此時(shí)才可以訪問網(wǎng)頁中的任何元素。而通過$(document).ready()方法注冊的事件處理程序，在DOM完全就緒時(shí)就可以被調(diào)用。此時(shí)，網(wǎng)頁的所有元素對jQuery而言都是可以訪問的，但是，這并不意味著這些元素關(guān)聯(lián)的文件都已經(jīng)下載完畢。

2.?執(zhí)行次數(shù)

在window.onload方法中，每個(gè)頁面只能綁定一個(gè)函數(shù)，如果頁面中執(zhí)行了兩次window.onload方法，則后綁定的函數(shù)會(huì)替換之前綁定的函數(shù)，因此不能在現(xiàn)有行為后添加新的行為。如圖4-1所示的代碼，執(zhí)行了兩次window.onload方法，頁面運(yùn)行后只打印“2”。圖4-1window.onload方法執(zhí)行示例

對比window.onload方法，$(document).ready()方法會(huì)在現(xiàn)有行為上追加新的行為，這些行為會(huì)根據(jù)注冊的順序依次執(zhí)行。也就是說，$(document).ready()方法可以執(zhí)行多次，不會(huì)替換前面的內(nèi)容。如圖4-2所示的代碼，執(zhí)行了兩次$(document).ready()方法，頁面運(yùn)行后打印“1”和“2”。圖4-2$(document).ready()方法執(zhí)行示例

4.2jQuery事件綁定

1.?bind()方法在頁面加載完成后，如果要為元素綁定事件來完成某些操作，則可以使用bind()方法來對匹配元素進(jìn)行特定事件的綁定。語法如下：$(selector).bind(type[,data][,function])

此方法最多允許傳入三個(gè)參數(shù)：

?第一個(gè)參數(shù)：必需參數(shù)，表示要綁定的事件類型，如點(diǎn)擊事件(click)、雙擊事件(dblclick)等。

?第二個(gè)參數(shù)：可選參數(shù)，表示作為event.data屬性值傳遞給事件對象的額外數(shù)據(jù)對象。

?第三個(gè)參數(shù)：必需參數(shù)，表示事件需要觸發(fā)的處理函數(shù)。

在jQuery中，可綁定的事件名比原生JavaScript的事件名少了“on”。例如鼠標(biāo)單擊事件，在原生JavaScript中的名字是onclick()，而在jQuery中對應(yīng)的是click()。

表4-1列舉了常用的jQuery事件，在后面的單元中會(huì)對這些事件進(jìn)行詳細(xì)講解。

更多的事件可以去官方幫助文檔查詢，官方幫助文檔地址：

/jquery/jquery_ref_events.asp

下面的代碼使用了bind()方法，為標(biāo)題(h3)元素綁定了一個(gè)點(diǎn)擊事件，點(diǎn)擊效果是：讓內(nèi)容(div)在顯示與隱藏之間切換。

顯示效果如圖4-3所示。圖4-3事件綁定效果展示

2.?簡寫綁定方法

像click、mouseover、mouseout等事件在編程過程中會(huì)經(jīng)常使用，jQuery為此提供了一套簡寫方法。簡寫方法和其他的jQuery方法寫法一樣，實(shí)現(xiàn)的效果也相同，唯一的區(qū)別就是能夠減少代碼量。

例如，為某div元素綁定click事件，使用bind()方法綁定的寫法為：

$('div').bind('click',function(){

//事件處理代碼

})

使用簡寫綁定事件的寫法為：

$('div').click(function(){

//事件處理代碼

})

3.?綁定多個(gè)事件類型

bind()方法不僅能為元素綁定瀏覽器支持的具有相同名稱的事件，而且可以綁定自定義事件，還能夠一次性綁定多個(gè)事件類型。

例如，同時(shí)為div綁定mouseover和mouseout事件的代碼如下：

$('div').bind('mouseovermouseout',function(){

$(this).toggleClass('highLight');

})

這段代碼等同于下面的代碼：

$('div').bind('mouseover',function(){

$(this).addClass('highLight');

}).bind('mouseout',function(){

$(this).removeClass('highLight');

})

這兩段代碼的作用都一樣，當(dāng)鼠標(biāo)移入p元素時(shí)，高亮顯示p元素；當(dāng)鼠標(biāo)移出p元素時(shí)，恢復(fù)p元素顯示狀態(tài)。

4.?添加事件命名空間

jQuery還可以把為元素綁定的多個(gè)事件類型用命名空間規(guī)范起來，即在所綁定的事件類型后面用點(diǎn)(.)添加命名空間，示例代碼如下：

上面的代碼，首先給div綁定了三個(gè)事件：click、mouseenter、dblclick，同時(shí)為前兩個(gè)事件添加了命名空間test，給按鈕(button)綁定了一個(gè)點(diǎn)擊事件，當(dāng)點(diǎn)擊按鈕時(shí)，刪除div中命名空間名為test的事件。當(dāng)點(diǎn)擊按鈕時(shí)，會(huì)刪除div的click和mouseenter事件，而dblclick事件則不會(huì)被刪除。

上面的點(diǎn)擊按鈕事件也可以用以下鏈?zhǔn)酱a實(shí)現(xiàn)：

$('button').click(function(){

$('div').unbind('click').unbind('mouseenter');

})

4.3合?成?事?件

jQuery有一個(gè)合成事件方法：hover()，這是jQuery自定義的方法。此方法用于模擬鼠標(biāo)懸停事件。語法如下：$(selector).hover(enter,leave)此方法有兩個(gè)必需參數(shù)，兩個(gè)參數(shù)都是事件處理函數(shù)。當(dāng)鼠標(biāo)移動(dòng)到元素上時(shí)，會(huì)觸發(fā)指定的第一個(gè)函數(shù)(enter)；當(dāng)鼠標(biāo)移除這個(gè)元素時(shí)，會(huì)觸發(fā)指定的第二個(gè)函數(shù)(leave)。

比如下面的代碼，使用jQuery模擬實(shí)現(xiàn)CSS:hover偽類的效果，當(dāng)鼠標(biāo)進(jìn)入元素時(shí)改變背景顏色，鼠標(biāo)移出時(shí)恢復(fù)背景顏色：

$('div').mouseenter(function(){

$(this).addClass('highLight');

})

$('div').mouseleave(function(){

$(this).removeClass('highLight');

})

將上面的例子改用hover()方法實(shí)現(xiàn)，代碼如下：

$('div').hover(function(){

$(this).addClass('highLight');

},function(){

$(this).removeClass('highLight');

})

4.4事?件?冒?泡

1.?什么是冒泡在頁面上可以有多個(gè)事件，也可以多個(gè)元素響應(yīng)同一個(gè)事件。比如圖4-4中的代碼，網(wǎng)頁上有兩個(gè)元素：div和p，p元素是div元素的子元素，兩者都綁定了click事件，同時(shí)body元素上也綁定了click事件，此時(shí)點(diǎn)擊p元素會(huì)觸發(fā)p元素的click事件，同時(shí)也會(huì)觸發(fā)div和body元素的click事件。

如圖4-4所示，點(diǎn)擊一次p元素，會(huì)依次在控制臺(tái)打印“3”“2”“1”。圖4-4事件冒泡示例

在這個(gè)示例中，點(diǎn)擊p元素時(shí)，也點(diǎn)擊了包含p元素的div元素和包含div元素的body元素，因此三個(gè)元素的點(diǎn)擊事件都被觸發(fā)了。而三個(gè)元素的點(diǎn)擊事件會(huì)按照以下順序依次觸發(fā)：p元素→div元素→body元素。因?yàn)槭录?huì)按照DOM樹的層次結(jié)構(gòu)像水泡一樣不斷向上直至頂端，所以稱為事件冒泡。事件冒泡過程示意圖如圖4-5所示。圖4-5事件冒泡過程示意圖

2.?事件對象

事件冒泡可能會(huì)引發(fā)預(yù)料之外的效果，比如上面的例子中，本來只想觸發(fā)p元素的點(diǎn)擊(click)事件，但是點(diǎn)擊時(shí)卻連同上級元素的點(diǎn)擊事件一起觸發(fā)了。因此，有必要對事件的作用范圍進(jìn)行限制，以便準(zhǔn)確控制點(diǎn)擊事件到底由誰來完成。比如當(dāng)點(diǎn)擊p元素時(shí)，只觸發(fā)p元素的點(diǎn)擊事件而不觸發(fā)div和body元素的點(diǎn)擊事件；當(dāng)點(diǎn)擊div元素時(shí)，只觸發(fā)div元素的點(diǎn)擊事件而不觸發(fā)body元素的點(diǎn)擊事件。用jQuery提供的事件對象就能很好地處理這個(gè)問題。

由于IE-DOM和標(biāo)準(zhǔn)DOM實(shí)現(xiàn)事件對象的方法各不相同，導(dǎo)致在不同瀏覽器中獲取事件對象變得比較困難。針對這個(gè)問題，jQuery進(jìn)行了必要的擴(kuò)展和封裝，從而使得在任何瀏覽器中都能很輕松地獲取事件對象以及事件對象的一些屬性。

在程序中使用事件對象非常簡單，只需要將事件對象作為函數(shù)的參數(shù)傳入即可，示例代碼如下：

$(selector).bind(type,function(event){

//事件處理代碼

})

事件對象(event)只有在事件處理函數(shù)中才能使用，事件處理函數(shù)執(zhí)行完畢后就會(huì)被銷毀。

事件對象常用的屬性和方法如表4-2所示。

如圖4-4所示的代碼，如果我們要實(shí)現(xiàn)點(diǎn)擊p元素時(shí)只觸發(fā)p元素的點(diǎn)擊事件，而不觸發(fā)div元素和body元素的點(diǎn)擊事件，可以在p元素的點(diǎn)擊事件中使用事件對象的阻止事件冒泡方法。圖4-4中的部分代碼修改如下：

4.5事?件?捕?獲

事件捕獲和事件冒泡是剛好相反的兩個(gè)過程，事件捕獲是從最頂端往下開始觸發(fā)。如冒泡事件的例子，其中元素的點(diǎn)擊(click)事件會(huì)按照以下順序捕獲：body元素→div元素→p元素。事件捕獲過程示意圖如圖4-6所示。圖4-6事件捕獲過程示意圖

遺憾的是，并非所有主流瀏覽器都支持事件捕獲，并且這個(gè)缺陷無法通過JavaScript來修復(fù)，因此，jQuery不支持事件捕獲。如果需要使用事件捕獲，可使用原生JavaScript來完成。

4.6移?除?事?件

1.?unbind()方法unbind()方法的作用是為匹配的元素解除指定事件的處理函數(shù)。語法如下：$(selector).unbind([type][,data])

此方法有兩個(gè)參數(shù)：

?第一個(gè)參數(shù)：可選參數(shù)，表示要解除綁定的事件類型。

?第二個(gè)參數(shù)：可選參數(shù)，表示要解除綁定的函數(shù)名。

此方法接受0～2個(gè)參數(shù)，根據(jù)參數(shù)個(gè)數(shù)不同，函數(shù)的作用也不同：

(1)?如果沒有參數(shù)，則刪除匹配元素所有綁定的事件。

(2)?如果提供了事件類型作為參數(shù)，則只刪除匹配元素該類型的綁定事件。

(3)?如果把在綁定時(shí)傳遞的處理函數(shù)作為第二個(gè)參數(shù)，則匹配元素只有這個(gè)特定的事件處理函數(shù)會(huì)被刪除。

2.?one()方法

對于只需要觸發(fā)一次，隨后就要立即解除綁定的情況，jQuery提供了一種簡寫方法one()。one()方法可以為元素綁定事件處理函數(shù)。當(dāng)處理函數(shù)觸發(fā)一次后，立即被刪除。即在每個(gè)對象上，事件處理函數(shù)只會(huì)被執(zhí)行一次。語法如下：

$(selector).one(type[,data],function)

one()方法和bind()方法的作用類似，使用方法也相同，此處不再贅述。

4.7模?擬?操?作

1.?trigger()方法普通的事件都需要通過用戶操作來觸發(fā)，如用戶點(diǎn)擊(click)、鼠標(biāo)移入(moveenter)等。但是，有時(shí)候需要通過模擬用戶操作來達(dá)到某些效果。例如在用戶進(jìn)入頁面后就觸發(fā)某個(gè)按鈕的點(diǎn)擊(click)事件，而不需要用戶去主動(dòng)點(diǎn)擊。

在jQuery中，可以使用trigger()方法完成模擬操作。trigger()方法的作用是觸發(fā)被選元素的指定事件類型以及事件的默認(rèn)行為，比如提交表單。語法如下：

$(selector).trigger(type[,data1][,data2][,…])

trigger()方法的第一個(gè)參數(shù)是必需的，用來規(guī)定指定元素上要觸發(fā)的事件，可以是自定義事件或者其他任何標(biāo)準(zhǔn)事件。從第二個(gè)參數(shù)開始是需要傳遞到事件處理函數(shù)的參數(shù)。

比如圖4-4中的代碼，想要直接觸發(fā)p元素的點(diǎn)擊事件，可以使用下面的代碼：

$('p').trigger('click')

上面的代碼也可以直接用簡寫方法click()來達(dá)到同樣的效果：

$('p').click()

2.?triggerHandler()方法

trigger()方法觸發(fā)事件后，會(huì)執(zhí)行瀏覽器的默認(rèn)操作。例如，下面的代碼不僅會(huì)觸發(fā)input元素綁定的focus事件(元素獲得焦點(diǎn)時(shí)觸發(fā)的事件)，也會(huì)使input元素本身得到焦點(diǎn)(瀏覽器默認(rèn)操作)。

$('input').trigger('focus')

如果只想觸發(fā)綁定的focus事件，而不想執(zhí)行瀏覽器的默認(rèn)操作，可以使用jQuery中另外一個(gè)類似的方法：triggerHandler()方法。

triggerHandler()方法的作用是觸發(fā)被選元素上指定的事件，而不觸發(fā)瀏覽器的默認(rèn)事件。語法如下：

$(selector).triggerHandler(type[,data1][,data2][,…])

triggerHandler()方法的參數(shù)和trigger()方法的一樣，此處不再贅述。

與其他jQuery方法不同的是，triggerHandler()方法的返回值是事件處理函數(shù)的返回值，而不是具有可鏈性的jQuery對象。此外，triggerHandler()觸發(fā)的事件不會(huì)在DOM樹中冒泡，如果沒有處理程序被觸發(fā)，這個(gè)方法會(huì)返回undefined。同時(shí)，triggerHandler()方法只操作匹配到的第一個(gè)元素，而不是所有匹配元素。

比如上面的示例代碼，如果使用triggerHandler()方法，那么文本框只會(huì)觸發(fā)綁定的focus事件，而不會(huì)得到焦點(diǎn)，代碼如下：

$('input').triggerHandler('focus')

1.?頁面設(shè)計(jì)

根據(jù)業(yè)務(wù)需求，進(jìn)行如下頁面設(shè)計(jì)：

?在頁面頂部放入一個(gè)div元素，用于放置用戶信息相關(guān)的HTML元素，在此div元素中放入一個(gè)超鏈接(a元素)，用于呼出登錄div。

?在頁面中放入另一個(gè)div元素，此div元素充斥整個(gè)頁面，定位方式為fixed，目的是呼出登錄界面后，充斥整個(gè)瀏覽器窗口。

?在登錄div層中放入一個(gè)div元素，該div元素在頁面居中位置，用于放置登錄相關(guān)HTML元素。

頁面設(shè)計(jì)示意圖如圖4-7和圖4-8所示。圖4-7正常頁面效果圖4-8進(jìn)入登錄界面

2.?定義頁面結(jié)構(gòu)及CSS樣式

由于頁面結(jié)構(gòu)及CSS樣式不是本書重點(diǎn)，因此這部分的編碼思路及過程省略，讀者可以參考下面的代碼：

3.?為頁面元素添加事件

1)?為登錄按鈕添加事件

頁面正常打開的情況下，登錄的div層應(yīng)該