JQuery知識快覽之二—事件

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

 

JQuery內置事件

1.Document加載事件

 

JQuery提供瞭ready,load,unload三個Document加載事件。load和unload事件從1.8版開始就不贊成使用瞭,ready可以說是我們用得最多的一個事件。這是一個最特別的事件,所有的JQuery語句的執行都始於ready事件。一般都在這個事件的響應函數裡綁定其他的響應函數,執行代碼等。

 

相對於JavaScript的load事件來說,ready事件更優,因為load事件是在一個頁面的所有資源,如圖片等都下載完成以後發生,而ready事件在DOM下載完成後就發生瞭。

 

它有多種使用形式:

 

$( document ).ready( handler )

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

$( handler )

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

 

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

 

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

 

3)不要使用.on("ready",handler)來代替.ready函數。

 

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

 

jQuery( document ).ready(function( $ ) {

// Code using $ as usual goes here.

});

 

 

2.鼠標事件

 

click

 

dblclick

 

mousedown

 

mouseup

 

mousemove

 

mouseenter

 

mouseleave

 

mouseover

 

mouseout

 

hover

 

註意事項:

 

1)最好不要對同一元素同時添加click和dblclick事件的響應函數,因為對這兩個事件的區分會造成一定的困擾

 

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

 

3)hover是mouseenter,mouseleave的組合。

 

 

 

3.鍵盤事件

 

keydown

 

keyup

 

keypress

 

註意事項:

 

1)鍵盤事件隻發送給當前的焦點元素,因為form常常能夠得到焦點,所以我們常把事件綁定到form上,如果想實現快捷鍵,可以將事件綁定到document上。

 

2)當輸入文本時適合用keypress,當快捷鍵時適合用keydown,keyup.

 

 

 

4.表單事件

 

focus

 

blur

 

focusin

 

focusout

 

change

 

select

 

submit

 

註意事項:

 

1)focusin,focusout和focus,blur的區別在於,當某元素獲得或者失去焦點時,其祖先節點也會收到focusin或focusout消息,而不會收到focus或blur消息。

 

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

 

3)select事件隻針對<input type="text">和<textarea>的文本選取操作,設置文本的插入點並不會引起select事件,選擇網頁靜態文本也不會引起select事件

 

 

 

5.瀏覽器事件

 

resize:瀏覽器窗口的resize事件,一次resize窗口的動作可能會引發多個resize事件。

 

scroll:瀏覽器窗口,可滾動的frame,有scroll屬性的元素都能產生scroll事件

 

error:1.8版開始不贊成使用瞭

 

 

 

JQuery事件函數

JQuery針對每個事件,都至少定義瞭兩個版本的事件函數,以click事件為例,JQuery定義瞭兩種函數,都名為click,隻是參數不同,一個函數用函數做參數,用於進行綁定事件處理函數,另一個函數不需要參數,用於觸發事件。如

 

#("button").click(function(){

//do things when button clicked.

});

$("button").click();//trigger click event

有的觸發事件的函數如select甚至能產生select行為,調用.select()能選中當前元素裡的所有文本。

 

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

 

 

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>click demo</title>

<style>

p {

float: left;

}

</style>

<script src="jquery.js"></script>

</head>

<body>

<p>

<ul>

<li>click me</li>

<li>click me</li>

</ul>

</p>

<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是真正觸發消息的對象。target為currentTarget對象或其子孫節點。

 

relatedTarget獲取相關對象,如對於mouseleave事件,相關對象是獲得mouseenter事件

 

註意:target,currentTarget,relatedTarget和this都是DOM元素,還需要要用$來轉化為JQuery能操作的對象,如

 

$(event.currentTarget).css("background-color","red");

pageX

 

pageY

 

which

 

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

 

對於鍵盤事件來說,則是對應的ASCII碼

 

altKey

 

ctrlKey

 

shiftKey

 

metaKey

 

type

 

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

 

 

 

JQuery的事件執行流程

一個事件觸發後,JQuery將先查看觸發該事件的元素是否有綁定對應的消息處理函數,如果有則按消息處理函數的綁定順序依次執行,當該元素的事件都處理完瞭後,如果該事件是冒泡事件,則依次向其父節點進行冒泡的過程,繼續檢查父節點,父節點的父節點。。。最後再執行該消息的默認響應行為。

 

通過對事件對象執行一定的操作,能改變這個流程。

 

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

 

event.stopImmediatePropagation();禁止之後的消息處理函數和冒泡過程,不禁止默認響應行為。

 

event.stopPropagation();不禁止之後的消息處理函數和默認響應行為,但是禁止冒泡過程。

 

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

 

 

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>click demo</title>

<style>

p {

float: left;

}

</style>

<script src="jquery.js"></script>

</head>

<body>

<p>

<ul>

<li><a href="baidu.com">link</a></li>

</ul>

</p>

<script>

$("li").click(false);

</script>

</body>

</html>

 

 

 

下面三個函數分別判斷上面三個函數是否已經執行。

 

event.isDefaultPrevented()

event.isImmediatePropagationStopped()

event.isPropagationStopped()

 

 

 

自定義事件

在某些情況下,你可能需要定制你自己的事件,下面是JQuery官網給的一個簡單的示例:

 

$( "#foo" ).on( "custom", function( event, param1, param2 ) {

alert( param1 + "\n" + param2 );

});

$( "#foo").trigger( "custom", [ "Custom", "Event" ] );

如果不想用自定義數據,可簡單的寫成這樣

 

$( "#foo" ).on( "custom", function() {

alert("custom event happened");

});

$( "#foo").trigger( "custom");

 

 

事件進階

前面,我們看到用on來綁定瞭一個自定義事件,用trigger來觸發瞭這個自定義事件,其實JQuery為事件的綁定和觸發提供瞭一些更復雜的處理方法,下面我們來學習一下。

 

 1.事件的觸發

 

JQuery提供瞭trigger和triggerHandler兩種觸發事件的函數。

 

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

 

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

 

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

 

2.事件處理函數的綁定和解綁定

 

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

 

1)on有兩種形式

 

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

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

 

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

 

當不提供selector時,為直接綁定模式,當事件傳遞到被綁定的對象時,就會被觸發。

 

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

 

為什麼需要有代理綁定模式呢?有兩個對代理綁定模式需求的情景:

 

a.因為進行事件綁定的時候,被綁定的對象必須已經存在,所以對於那些會動態加入的元素,就可以用代理綁定模式,將事件綁定到其已經存在的最接近的祖先節點上。

 

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

 

 

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>click demo</title>

<style>

p {

float: left;

}

</style>

<script src="jquery.js"></script>

</head>

<body>

<p>

<ul>

<li><a href="baidu.com">link</li>

</ul>

</p>

<script>

$("ul").on("click",$("a"),function(){

  alert("a is clicked");

});

$("li").click(function(){

  alert("li is clicked");

});

 

</script>

</body>

</html>

 

 

 

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

 

JQuery提供瞭根據事件名稱,空間,選擇器,和事件處理函數的組合條件來刪除事件綁定的各種便利方式。

 

 

 

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

 

 

發佈留言