事件是腳本語言的核心。本文將為大家介紹JQuery支持的一些事件和如何自定義事件

JQuery內(nèi)置事件

JQuery提供了ready，load，unload三個Document加載事件。load和unload事件從1.8版開始就不贊成使用了，ready可以說是我們用得最多的一個事件。這是一個最特別的事件，所有的JQuery語句的執(zhí)行都始于ready事件。一般都在這個事件的響應(yīng)函數(shù)里綁定其他的響應(yīng)函數(shù)，執(zhí)行代碼等。

相對于JavaScript的load事件來說，ready事件更優(yōu)，因為load事件是在一個頁面的所有資源，如圖片等都下載完成以后發(fā)生，而ready事件在DOM下載完成后就發(fā)生了。

它有多種使用形式：

$( document ).ready( handler )$().ready( handler ) (this is not recommended)$( handler )

在用ready事件時需要注意如下四點

1)ready函數(shù)的位置:如果腳本依賴于CSS屬性，則需要在引入css文件之后引入腳本文件，如果腳本依賴于某個資源，則需要用load事件。

2)<body onload="">屬性和JQuery的ready，load事件沖突，不要一起使用。

4)$和其他庫中定義沖突時，可用如下形式寫代碼:

jQuery( document ).ready(function( $ ) {// Code using $ as usual goes here.});

1)最好不要對同一元素同時添加click和dblclick事件的響應(yīng)函數(shù)，因為對這兩個事件的區(qū)分會造成一定的困擾

2)mouseenter,mouseleave和mouseover,mouseout的不同在于，當(dāng)鼠標(biāo)移動到某元素上或離開某元素時，其祖先節(jié)點也會接收到mouseover或mouseout事件，但是不會接收到mouseenter或mouseleave事件,所以推薦使用mouseenter和mouseleave。

3)hover是mouseenter,mouseleave的組合。

1)鍵盤事件只發(fā)送給當(dāng)前的焦點元素，因為form常常能夠得到焦點，所以我們常把事件綁定到form上，如果想實現(xiàn)快捷鍵，可以將事件綁定到document上。

2)當(dāng)輸入文本時適合用keypress，當(dāng)快捷鍵時適合用keydown,keyup.

1)focusin,focusout和focus,blur的區(qū)別在于，當(dāng)某元素獲得或者失去焦點時，其祖先節(jié)點也會收到focusin或focusout消息，而不會收到focus或blur消息。

2)對選擇框等元素，只要用戶做出選擇就會觸發(fā)change事件，而對<textarea>等元素，當(dāng)元素失去焦點時才有可能觸發(fā)change事件。

3)select事件只針對<input type="text">和<textarea>的文本選取操作，設(shè)置文本的插入點并不會引起select事件，選擇網(wǎng)頁靜態(tài)文本也不會引起select事件

5.瀏覽器事件

resize:瀏覽器窗口的resize事件，一次resize窗口的動作可能會引發(fā)多個resize事件。

scroll:瀏覽器窗口，可滾動的frame，有scroll屬性的元素都能產(chǎn)生scroll事件

error：1.8版開始不贊成使用了

JQuery事件函數(shù)

JQuery針對每個事件，都至少定義了兩個版本的事件函數(shù)，以click事件為例，JQuery定義了兩種函數(shù)，都名為click，只是參數(shù)不同，一個函數(shù)用函數(shù)做參數(shù)，用于進行綁定事件處理函數(shù)，另一個函數(shù)不需要參數(shù)，用于觸發(fā)事件。如

#("button").click(function(){//do things when button clicked.});

有的觸發(fā)事件的函數(shù)如select甚至能產(chǎn)生select行為，調(diào)用.select()能選中當(dāng)前元素里的所有文本。

在事件處理函數(shù)中，可以用帶參數(shù)的函數(shù)形式來獲取event中的數(shù)據(jù)，可以用$(this)來獲取觸發(fā)事件的對象。下面看一個簡單的例子

<!doctype html><html lang="en"><head><meta charset="utf-8"><title>click demo</title><style>div {float: left;}</style><script src="jquery.js"></script></head><body><div><ul><li>click me</li><li>click me</li></ul></div><script>$("ul li").click(function(event){$(this).html("Mouse clicked at pos:"+event.pageX+","+event.pageY);});</script></body></html>

JQuery事件對象

在上面的例子中我們用到了事件對象里的屬性，下面我們來簡單看一下事件對象有哪些屬性(部分個人認為重要的屬性，不全):

target

currentTarget(不推薦)

注意:this和currentTarget都是綁定事件的對象，對于delegated events，則是selector匹配的元素。而target是真正觸發(fā)消息的對象。target為currentTarget對象或其子孫節(jié)點。

注意:target,currentTarget,relatedTarget和this都是DOM元素，還需要要用$來轉(zhuǎn)化為JQuery能操作的對象，如

pageX

pageY

which

對于mousedown和mouseup事件來說，1代表左鍵，2代表中間鍵，3代表右鍵

對于鍵盤事件來說，則是對應(yīng)的ASCII碼

data:數(shù)據(jù)傳入方式為.click( [eventData ], handler(eventObject) )

JQuery的事件執(zhí)行流程

一個事件觸發(fā)后，JQuery將先查看觸發(fā)該事件的元素是否有綁定對應(yīng)的消息處理函數(shù)，如果有則按消息處理函數(shù)的綁定順序依次執(zhí)行，當(dāng)該元素的事件都處理完了后，如果該事件是冒泡事件，則依次向其父節(jié)點進行冒泡的過程，繼續(xù)檢查父節(jié)點，父節(jié)點的父節(jié)點。。。最后再執(zhí)行該消息的默認響應(yīng)行為。

通過對事件對象執(zhí)行一定的操作，能改變這個流程。

event.preventDefault();可以禁止消息的默認響應(yīng)行為。

event.stopImmediatePropagation();禁止之后的消息處理函數(shù)和冒泡過程，不禁止默認響應(yīng)行為。

event.stopPropagation();不禁止之后的消息處理函數(shù)和默認響應(yīng)行為，但是禁止冒泡過程。

在函數(shù)里return false;效果和event.preventDefault()+event.stopPropagation()一樣。甚至你可以直接用false來代替一個return false的函數(shù)，如下：

<!doctype html><html lang="en"><head><meta charset="utf-8"><title>click demo</title><style>div {float: left;}</style><script src="jquery.js"></script></head><body><div><ul><li><a href="baidu.com">link</a></li></ul></div><script>$("li").click(false);</script></body></html>

下面三個函數(shù)分別判斷上面三個函數(shù)是否已經(jīng)執(zhí)行。

event.isDefaultPrevented()
event.isImmediatePropagationStopped()
event.isPropagationStopped()

自定義事件

在某些情況下，你可能需要定制你自己的事件，下面是JQuery官網(wǎng)給的一個簡單的示例：

$( "#foo" ).on( "custom", function( event, param1, param2 ) {alert( param1 + "\n" + param2 );});$( "#foo").trigger( "custom", [ "Custom", "Event" ] );

如果不想用自定義數(shù)據(jù)，可簡單的寫成這樣

$( "#foo" ).on( "custom", function() {alert("custom event happened");});$( "#foo").trigger( "custom");

事件進階

前面，我們看到用on來綁定了一個自定義事件，用trigger來觸發(fā)了這個自定義事件，其實JQuery為事件的綁定和觸發(fā)提供了一些更復(fù)雜的處理方法，下面我們來學(xué)習(xí)一下。

1.事件的觸發(fā)

JQuery提供了trigger和triggerHandler兩種觸發(fā)事件的函數(shù)。

.trigger會為其選擇器中所有的元素觸發(fā)事件，且事件會進行冒泡處理，但是不會引起事件的默認行為。

.triggerHandler只會為其選擇器中的第一個元素觸發(fā)事件，且事件不會進行冒泡處理，也不會引起事件的默認行為。

另外兩個函數(shù)的返回值也是不一樣的。

2.事件處理函數(shù)的綁定和解綁定

1.7版新增了on和off兩個函數(shù)來進行事件處理函數(shù)的綁定和解綁定，這兩個函數(shù)基本代替了原有的bind,unbind和delegate,undelegate的功能，所以現(xiàn)在JQuery官方推薦用on和off來替代另兩組函數(shù)。

1)on有兩種形式

.on( events [, selector ] [, data ], handler(eventObject) )
.on( events [, selector ] [, data ] )

其中第二種形式的參數(shù)events可以是事件字符串和相應(yīng)處理函數(shù)的數(shù)組，個人不喜歡這種形式，覺得看著亂，不如多寫幾個on呢。

當(dāng)不提供selector時，為直接綁定模式，當(dāng)事件傳遞到被綁定的對象時，就會被觸發(fā)。

當(dāng)提供selector時，為代理綁定模式，當(dāng)事件傳遞到被綁定的對象時，會檢查在冒泡過程中，是否存在滿足selector條件的元素，如果有，則會被觸發(fā)，沒有則不會觸發(fā)。

為什么需要有代理綁定模式呢？有兩個對代理綁定模式需求的情景：

a.因為進行事件綁定的時候，被綁定的對象必須已經(jīng)存在，所以對于那些會動態(tài)加入的元素，就可以用代理綁定模式，將事件綁定到其已經(jīng)存在的最接近的祖先節(jié)點上。

b.某父節(jié)點下有多個節(jié)點需要響應(yīng)同一個事件。這時使用代理綁定模式能提高效率。

<!doctype html><html lang="en"><head><meta charset="utf-8"><title>click demo</title><style>div {float: left;}</style><script src="jquery.js"></script></head><body><div><ul><li><a href="baidu.com">link</li></ul></div><script>$("ul").on("click",$("a"),function(){  alert("a is clicked");});$("li").click(function(){  alert("li is clicked");});</script></body></html>

2)off函數(shù)和on函數(shù)相對，也有兩種形式，且支持直接綁定和代理綁定兩種模式。

JQuery提供了根據(jù)事件名稱，空間，選擇器，和事件處理函數(shù)的組合條件來刪除事件綁定的各種便利方式。

3)one函數(shù)，消息綁定只被觸發(fā)一次就會被移除。特別的是在代理綁定模式中，只要事件傳遞到被綁定的對象，不管是否被觸發(fā)，都會移除消息綁定。

本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊舉報。

免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

JQuery內(nèi)置事件

JQuery事件函數(shù)

JQuery事件對象

JQuery的事件執(zhí)行流程

自定義事件

事件進階