從零開(kāi)始學(xué)習(xí)jQuery (五) jquery事件與事件對(duì)象

更新時(shí)間：2011年02月23日 22:35:58 作者：

事件是腳本編程的靈魂. 所以本章內(nèi)容也是jQuery學(xué)習(xí)的重點(diǎn). 本文將對(duì)jQuery中的事件處理以及事件對(duì)象進(jìn)行詳細(xì)的講解.

一.摘要

二.前言

本篇文章是至今為止本系列內(nèi)容最多的一篇, 足以可見(jiàn)其重要性. 大家反映要多列舉示例. 我會(huì)在時(shí)間允許的情況下盡量多列舉示例. 真正的投入生產(chǎn)使用的實(shí)例暫時(shí)還無(wú)法加入到文章中, 但是可能最后我會(huì)列舉一些作品供大家借鑒. 另外本人水平有限, 因?yàn)槲也皇荱I設(shè)計(jì)師. 文章可能有錯(cuò)誤的地方, 希望大家?guī)兔χ赋? 一起學(xué)習(xí)一起進(jìn)步. 在技術(shù)的世界里我們是沒(méi)有任何利益瓜葛. 希望大家都抱著彼此鼓勵(lì)的心態(tài), 對(duì)于回復(fù)中的激進(jìn)評(píng)論我也都會(huì)考慮, 但是希望能夠彼此尊重, 保護(hù)博客園這片程序員的凈土!

三.事件與事件對(duì)象

曾經(jīng)在我的 "Javascript公共腳本庫(kù)系列(二): 添加事件多播委托的方法" 和 "Javascript公共腳本庫(kù)系列(三): 格式化事件對(duì)象/事件對(duì)象詳解" 兩篇文章中, 曾講解過(guò)javascript中的事件和事件對(duì)象.

首先看一下我們經(jīng)常使用的添加事件的方式:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>javascript中的事件</title> 
<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script> 
<script type="text/javascript"> 
$(function() 
{ 
document.getElementById("testDiv2").onclick = showMsg; 
}) 
function showMsg(event) 
{ 
alert("!!!"); 
} 
</script> 
</head> 
<body> 
<div id="testDiv1" onclick="showMsg();">單擊事件 1</div> 
<div id="testDiv2">單擊事件 2</div> 
</body> 
</html>

我們最常使用為元素添加onclick元素屬性的方式添加事件.

為testDiv2的添加onclick事件的方式是修改Dom屬性.

在上一章中已經(jīng)說(shuō)明了什么是元素屬性, 什么是Dom屬性.這兩種方式的效果相同. 當(dāng)單擊div時(shí)會(huì)顯示提示框.

請(qǐng)注意, 雖然效果相同, 但是并不等效.

document.getElementById("testDiv2").onclick = showMsg;

等效于:

<div id="testDiv1" onclick="alert("!!!");">單擊事件 1</div>

注意兩者的區(qū)別了嗎? 我們常用的修改元素屬性添加事件的方式, 實(shí)際上是建立了一個(gè)匿名函數(shù):

document.getElementById("testDiv1").onclick = function(event) 
{ 
alert("!!!"); 
};

這個(gè)匿名函數(shù)的簽名和我們手寫(xiě)的showMsg簽名相同, 所以可以把showMsg直接賦值給onclick.

這種方式的弊端是:

1. 只能為一個(gè)事件綁定一個(gè)事件處理函數(shù). 使用"="賦值會(huì)把前面為此時(shí)間綁定的所有事件處理函數(shù)沖掉.

2. 在事件函數(shù)(無(wú)論是匿名函數(shù)還是綁定的函數(shù))中獲取事件對(duì)象的方式在不同瀏覽器中要特殊處理:

IE中,事件對(duì)象是window對(duì)象的一個(gè)屬性.事件處理函數(shù)必須這樣訪(fǎng)問(wèn)事件對(duì)象:

 obj.onclick=function() 
{ 
var oEvent = window.event; 
}

在DOM標(biāo)準(zhǔn)中,事件對(duì)象必須作為唯一參數(shù)傳給事件處理函數(shù):

 obj.onclick=function() 
{ 
var oEvent = arguments[0]; 
}

除了使用argument[0]訪(fǎng)問(wèn)此參數(shù), 我們也可以指定參數(shù)名稱(chēng),上面的代碼等同于:

 obj.onclick=function(oEvent) 
{ 
}

目前兼容DOM的瀏覽器有Firefox,Safari,Opera,IE7等.

3. 添加多播委托的函數(shù)在不同瀏覽器中是不一樣的.

下面是在"Javascript公共腳本庫(kù)系列(二): 添加事件多播委托的方法"文章中, 提供的兼容多瀏覽器添加多播委托的方法:

//統(tǒng)一的為對(duì)象添加多播事件委托的方法 
/*  
 參數(shù)說(shuō)明: 
 oTarget : 要添加事件的對(duì)象.比如"document". 
 sEventType : 事件類(lèi)型.比如單擊事件"click". 
 fnHandler : 發(fā)生事件時(shí)調(diào)用的方法. 比如一個(gè)靜態(tài)函數(shù)"hideCalendar" 
  
 使用舉例: 
 //單擊頁(yè)面的任何元素,只要沒(méi)有取消冒泡,都可以關(guān)閉日歷控件 
 var cf = document.getElementById("CalFrame"); 
 if( cf != null && hideCalendar != null ) 
 { 
 ScriptHelper.addEventListener( document, "click", hideCalendar ); 
 } 
*/ 
scriptHelper.prototype.addEventListener = function(oTarget, sEventType, fnHandler) 
{ 
if( oTarget.addEventListener )//for dom 
{ 
oTarget.addEventListener( sEventType, fnHandler, false ) 
} 
else if( oTarget.attachEvent )//for ie 
{ 
oTarget.attachEvent( "on" + sEventType, fnHandler); 
} 
}

所以我們首先應(yīng)該摒棄<div onclick="..."></div>這種通過(guò)修改元素屬性添加事件的方式. 盡量使用添加多播事件委托的方式為一個(gè)事件綁定多個(gè)事件處理函數(shù), 比如為document對(duì)象的單擊事件添加一個(gè)關(guān)閉彈出層的方法, 使用多播就不會(huì)影響document對(duì)象原有的事件處理函數(shù).

四. jQuery中的事件

有了jQuery, 我們有了處理對(duì)象事件的一系列函數(shù). 上面基礎(chǔ)知識(shí)還是要懂, 但是再也不用自己去實(shí)現(xiàn)處理多播事件委托的函數(shù)了. 正所謂有了jQuery, 天天喝茶水. 下面是在jQuery中最常使用的bind()方法舉例:

$("#testDiv4").bind("click", showMsg);

我們?yōu)閕d是testDiv4的元素, 添加列click事件的事件處理函數(shù)showMsg.

使用jQuery事件處理函數(shù)的好處:

1. 添加的是多播事件委托. 也就是為click事件又添加了一個(gè)方法, 不會(huì)覆蓋對(duì)象的click事件原有的事件處理函數(shù).

 $("#testDiv4").bind("click", function(event) { alert("one"); }); 
$("#testDiv4").bind("click", function(event) { alert("two"); });

單擊testDiv4對(duì)象時(shí), 依次提示"one"和"two".

2. 統(tǒng)一了事件名稱(chēng).
添加多播事件委托時(shí), ie中是事件名稱(chēng)前面有"on". 但是使用bind()函數(shù)我們不用區(qū)分ie和dom , 因?yàn)閮?nèi)部jQuery已經(jīng)幫我們統(tǒng)一了事件的名稱(chēng).

3. 可以將對(duì)象行為全部用腳本控制.
讓HTML代碼部分只注意"顯示"邏輯. 現(xiàn)在的趨勢(shì)是將HTML的行為, 內(nèi)容與樣式切分干凈. 其中用腳本控制元素行為, 用HTML標(biāo)簽控制元素內(nèi)容, 用CSS控制元素樣式. 使用jQuery事件處理函數(shù)可以避免在HTML標(biāo)簽上直接添加事件.

下面是基礎(chǔ)的jQuery事件處理函數(shù):

事件處理 Event Handling:

名稱(chēng)	說(shuō)明	舉例
bind( type, [data], fn )	為每一個(gè)匹配元素的特定事件（像click）綁定一個(gè)事件處理器函數(shù)。	當(dāng)每個(gè)段落被點(diǎn)擊的時(shí)候，彈出其文本: $("p").bind("click", function(){ alert( $(this).text() ); });
one( type, [data], fn )	為每一個(gè)匹配元素的特定事件（像click）綁定一個(gè)一次性的事件處理函數(shù)。	當(dāng)所有段落被第一次點(diǎn)擊的時(shí)候，顯示所有其文本: $("p").one("click", function(){ alert( $(this).text() ); });
trigger( event, [data] )	在每一個(gè)匹配的元素上觸發(fā)某類(lèi)事件。這個(gè)函數(shù)也會(huì)導(dǎo)致瀏覽器同名的默認(rèn)行為的執(zhí)行。比如，如果用trigger()觸發(fā)一個(gè)'submit'，則同樣會(huì)導(dǎo)致瀏覽器提交表單。如果要阻止這種默認(rèn)行為，應(yīng)返回false。你也可以觸發(fā)由bind()注冊(cè)的自定義事件	給一個(gè)事件傳遞參數(shù): $("p").click( function (event, a, b) { // 一個(gè)普通的點(diǎn)擊事件時(shí)，a和b是undefined類(lèi)型 // 如果用下面的語(yǔ)句觸發(fā)，那么a指向"foo",而b指向"bar" } ).trigger("click", ["foo", "bar"]);
triggerHandler( event, [data] )	這個(gè)特別的方法將會(huì)觸發(fā)指定的事件類(lèi)型上所有綁定的處理函數(shù)。但不會(huì)執(zhí)行瀏覽器默認(rèn)動(dòng)作.	如果你對(duì)一個(gè)focus事件執(zhí)行了 .triggerHandler() ，瀏覽器默認(rèn)動(dòng)作將不會(huì)被觸發(fā)，只會(huì)觸發(fā)你綁定的動(dòng)作: $("#old").click(function(){ $("input").trigger("focus"); }); $("#new").click(function(){ $("input").triggerHandler("focus"); }); $("input").focus(function(){ $("<span>Focused!</span>").appendTo("body").fadeOut(1000); });
unbind( type, fn )	bind()的反向操作，從每一個(gè)匹配的元素中刪除綁定的事件。如果沒(méi)有參數(shù)，則刪除所有綁定的事件。你可以將你用bind()注冊(cè)的自定義事件取消綁定。如果提供了事件類(lèi)型作為參數(shù)，則只刪除該類(lèi)型的綁定事件。如果把在綁定時(shí)傳遞的處理函數(shù)作為第二個(gè)參數(shù)，則只有這個(gè)特定的事件處理函數(shù)會(huì)被刪除。	把所有段落的所有事件取消綁定: $("p").unbind() 將段落的click事件取消綁定: $("p").unbind( "click" ) 刪除特定函數(shù)的綁定，將函數(shù)作為第二個(gè)參數(shù)傳入: var foo = function () { // 處理某個(gè)事件的代碼 }; $("p").bind("click", foo); // ... 當(dāng)點(diǎn)擊段落的時(shí)候會(huì)觸發(fā) foo $("p").unbind("click", foo); // ... 再也不會(huì)被觸發(fā) foo

五.常用事件函數(shù)舉例

1.bind( type, [data], fn ) 函數(shù)舉例

bind()是最常使用的函數(shù), 注意方法簽名上data參數(shù), 可以在事件處理之前傳遞一些附加的數(shù)據(jù):

function handler(event) { 
alert(event.data.foo); 
} 
$("p").bind("click", {foo: "bar"}, handler)

注意event參數(shù)的使用. jQuery中統(tǒng)一了事件對(duì)象, 將事件對(duì)象作為事件處理函數(shù)的唯一參數(shù)傳遞.

data參數(shù)我們也要通過(guò)event.data 進(jìn)行訪(fǎng)問(wèn). 為何要提供data參數(shù)呢?

因?yàn)槲覀兘?jīng)常碰到這樣的問(wèn)題: 希望在事件處理中根據(jù)事件源的某些數(shù)據(jù)進(jìn)行特殊處理.

目前網(wǎng)上有兩種存在爭(zhēng)議的解決方法:

(1) 使用自定義元素屬性存儲(chǔ)數(shù)據(jù).

比如:

<div id="testDiv5" customer="customer data 1">獲取自定義數(shù)據(jù)-1</div>

在事件處理函數(shù)中獲取數(shù)據(jù):

$("#testDiv5").bind("click", function(event) { alert($(event.target).attr("customer")); });

attr函數(shù)是上一講中的知識(shí), 用于獲取元素的"元素屬性", 而且可以獲取自定義的元素屬性. 單擊div后將顯示:

(2) 使用腳本將數(shù)據(jù)傳遞給事件處理函數(shù):

<div id="testDiv6">獲取自定義數(shù)據(jù)-2</div>

元素沒(méi)有任何的自定義屬性, 添加事件處理函數(shù)時(shí)將額外的數(shù)據(jù)傳遞:

$("#testDiv6").bind("click", { customer: "customer data 2" }, function(event) { alert(event.data.customer) });

點(diǎn)擊div后的結(jié)果和方法1相同:

方法1便于存儲(chǔ)和查找數(shù)據(jù). 但是自定義屬性通過(guò)不W3C驗(yàn)證.

方法2必須要自己想辦法存儲(chǔ)數(shù)據(jù), 并且要制定規(guī)則查找指定元素的數(shù)據(jù).

從"開(kāi)發(fā)人員"的角度方法1要更加簡(jiǎn)單直觀(guān). 但是缺點(diǎn)比較嚴(yán)重. 所以如何取舍請(qǐng)大家自己決定.

one( type, [data], fn ) 函數(shù)和bind一樣, 但是只執(zhí)行一次.

2. trigger( event, [data] ) 和 triggerHandler( event, [data] )

雖然為元素綁定了某些事件, 比如click, 但是有時(shí)希望在程序中觸發(fā)這些事件, 這兩個(gè)函數(shù)可以實(shí)現(xiàn)此功能.

主要區(qū)別是trigger會(huì)出發(fā)瀏覽器默認(rèn)的動(dòng)作, 而triggerHandler不會(huì)出發(fā).

通過(guò)下面的實(shí)例可以明確的區(qū)分這兩個(gè)函數(shù):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>jQuery事件處理:trigger和triggerHandler示例</title> 
<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script> 
<script type="text/javascript"> 
$(function() 
{ 
$("#old").click(function() 
{ 
$("#divResult").html(""); 
$("input").trigger("focus"); 
}); 
$("#new").click(function() 
{ 
$("#divResult").html(""); 
$("input").triggerHandler("focus"); 
}); 
$("input").focus(function() { $("<span>Focused!</span>").appendTo("#divResult"); }); 
}) 
</script> 
</head> 
<body> 
<button id="old"> 
.trigger("focus")</button> 
<button id="new"> 
.triggerHandler("focus")</button><br /> 
<br /> 
<input type="text" value="To Be Focused" /> 
<div id="divResult"></div> 
</body> 
</html>

當(dāng)單擊".trigger"按鈕時(shí), 會(huì)調(diào)用兩次Focesed, 并且input元素獲得了焦點(diǎn):

單擊".triggerHandler"按鈕時(shí), 只調(diào)用一次,并且input元素沒(méi)有獲得焦點(diǎn):

也就是說(shuō), trigger函數(shù)出發(fā)了瀏覽器默認(rèn)的獲取焦點(diǎn)的行為,讓input元素獲得了焦點(diǎn), 所以再次調(diào)用了focus事件處理函數(shù).

triggerHandler只調(diào)用為focus事件綁定的事件處理函數(shù), 而不引發(fā)瀏覽器行為, 所以最后input元素沒(méi)有獲得焦點(diǎn).

六.快捷事件 Event Helpers

BUG提示:jquery-1.3.2-vsdoc2.js 這個(gè)最新的官方帶智能提示的類(lèi)庫(kù), 無(wú)法使用快捷事件, 比如click(), focus(). 使用其他版本的類(lèi)庫(kù)則沒(méi)有問(wèn)題.

雖然我們可以使用事件處理函數(shù)完成對(duì)象事件的幾乎所有操作, 但是jQuery提供了對(duì)常用事件的封裝. 比如單擊事件對(duì)應(yīng)的兩個(gè)方法click()和click(fn)分別用來(lái)觸發(fā)單擊事件和設(shè)置單擊事件.

設(shè)置單擊事件:

$("#testDiv").click(function(event) { alert("test div clicked ! "); });

等效于:

$("#testDiv").bind("click", function(event) { alert("test div clicked ! "); });

觸發(fā)單擊事件:

$("#testDiv").click();

等效于

$("#testDiv").trigger("click");

注意這里等效的是trigger而不是triggerHandler.

此類(lèi)方法在jQuery中英文叫做Event Helpers, 我找不到很好的翻譯方式, 所以按照功能稱(chēng)其為"快捷方法", 征集好的翻譯名稱(chēng)!

下面是jQuery的快捷方法列表:

由于都是都是對(duì)應(yīng)的事件, 所以不再寫(xiě)說(shuō)明和舉例了.

名稱(chēng)	說(shuō)明	舉例
blur( )
blur( fn )
change( )
change( fn )
click( )
click( fn )
dblclick( )
dblclick( fn )
error( )
error( fn )
focus( )
focus( fn )
keydown( )
keydown( fn )
keypress( )
keypress( fn )
keyup( )
keyup( fn )
load( fn )
mousedown( fn )
mouseenter( fn )
mouseleave( fn )
mousemove( fn )
mouseout( fn )
mouseover( fn )
mouseup( fn )
resize( fn )
scroll( fn )
select( )
select( fn )
submit( )
submit( fn )
unload( fn )

七. 交互幫助方法

除了基本的實(shí)踐, jQuery提供了兩個(gè)和事件相關(guān)的幫助方法: hover( over, out ) 和 toggle( fn, fn2, fn3,fn4,... )

1. hover( over, out )

hover函數(shù)主要解決在原始javascript中mouseover和mouseout函數(shù)存在的問(wèn)題, 看下面這個(gè)示例:

有兩個(gè)div(紅色區(qū)域), 里面分別嵌套了一個(gè)div(黃色區(qū)域). HTML代碼如下:

 <div class="outer" id="outer1"> 
Outer 1 
<div class="inner" id="inner1">Inner 1</div> 
</div> 
<div class="outer" id="outer2"> 
Outer 2 
<div class="inner" id="inner2">Inner 2</div> 
</div> 
<div id="console"></div>

綁定如下事件:

 <script type="text/javascript"> 
function report(event) { 
$('#console').append('<div>'+event.type+'</div>'); 
} 
$(function(){ 
$('#outer1') 
.bind('mouseover',report) 
.bind('mouseout',report); 
$('#outer2').hover(report,report); 
}); 
</script>

Outer1我們使用了mouseover和mouseout事件, 當(dāng)鼠標(biāo)從Outer1的紅色區(qū)域移動(dòng)到黃色區(qū)域時(shí), 會(huì)發(fā)現(xiàn)雖然都是在outer1的內(nèi)部移動(dòng), 但是卻觸發(fā)了mouseout事件:

很多時(shí)候我們不希望出現(xiàn)上圖的結(jié)果, 而是希望只有鼠標(biāo)在Outer1內(nèi)部移動(dòng)時(shí)不觸發(fā)事件, Outer2使用Hover()函數(shù)實(shí)現(xiàn)了這個(gè)效果:

注意這里的事件名稱(chēng)進(jìn)入叫做"mouseenter", 離開(kāi)叫做"mouseleave", 而不再使用"mouseover"和"mouseleave"事件.

有經(jīng)驗(yàn)的開(kāi)發(fā)人員會(huì)立刻想到在制作彈出菜單時(shí), 經(jīng)常遇到這個(gè)問(wèn)題: 為彈出菜單設(shè)置了mouseout事件自動(dòng)關(guān)閉, 但是鼠標(biāo)在彈出菜單內(nèi)移動(dòng)時(shí)常常莫名其妙觸發(fā)mouseout事件讓菜單關(guān)閉. hover()函數(shù)幫助我們很好的解決了這個(gè)問(wèn)題.

2. toggle( fn, fn2, fn3,fn4,... )

toggle函數(shù)可以為對(duì)象添加click事件綁定函數(shù), 但是設(shè)置每次點(diǎn)擊后依次的調(diào)用函數(shù)。

如果點(diǎn)擊了一個(gè)匹配的元素，則觸發(fā)指定的第一個(gè)函數(shù)，當(dāng)再次點(diǎn)擊同一元素時(shí)，則觸發(fā)指定的第二個(gè)函數(shù)，如果有更多函數(shù)，則再次觸發(fā)，直到最后一個(gè)。隨后的每次點(diǎn)擊都重復(fù)對(duì)這幾個(gè)函數(shù)的輪番調(diào)用。

可以使用unbind("click")來(lái)刪除。

下面的示例演示如何使用toggle函數(shù):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>toggle example</title> 
<link rel="stylesheet" type="text/css" href="css/hover.css"> 
<script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script> 
<script type="text/javascript"> 
$(function() 
{ 
$("li").toggle( 
function() 
{ 
$(this).css({ "list-style-type": "disc", "color": "blue" }); 
}, 
function() 
{ 
$(this).css({ "list-style-type": "square", "color": "red" }); 
}, 
function() 
{ 
$(this).css({ "list-style-type": "none", "color": "" }); 
} 
); 
}) 
</script> 
</head> 
<body> 
<ul> 
<li style="cursor:pointer">click me</li> 
</ul> 
</body> 
</html>

結(jié)果是每點(diǎn)擊一次"click me"變換一次列表符號(hào)和文字顏色.

八.使用jQuery事件對(duì)象

使用事件自然少不了事件對(duì)象. 因?yàn)椴煌瑸g覽器之間事件對(duì)象的獲取, 以及事件對(duì)象的屬性都有差異, 導(dǎo)致我們很難跨瀏覽器使用事件對(duì)象.

jQuery中統(tǒng)一了事件對(duì)象, 當(dāng)綁定事件處理函數(shù)時(shí), 會(huì)將jQuery格式化后的事件對(duì)象作為唯一參數(shù)傳入:

$("#testDiv").bind("click", function(event) { });

關(guān)于event對(duì)象的詳細(xì)說(shuō)明, 可以參考jQuery官方文檔: http://docs.jquery.com/Events/jQuery.Event

jQuery事件對(duì)象將不同瀏覽器的差異進(jìn)行了合并, 比如可以在所有瀏覽器中通過(guò) event.target 屬性來(lái)獲取事件的觸發(fā)者(在IE中使用原生的事件對(duì)象, 需要訪(fǎng)問(wèn)event.srcElement).

下面是jQuery事件對(duì)象可以在擴(kuò)瀏覽器支持的屬性:

屬性名稱(chēng)	描述	舉例
type	事件類(lèi)型.如果使用一個(gè)事件處理函數(shù)來(lái)處理多個(gè)事件, 可以使用此屬性獲得事件類(lèi)型,比如click.	$("a").click(function(event) { alert(event.type); });
target	獲取事件觸發(fā)者DOM對(duì)象	$("a[href=http://google.com]").click(function(event) { alert(event.target.href); });
data	事件調(diào)用時(shí)傳入額外參數(shù).	$("a").each(function(i) { $(this).bind('click', {index:i}, function(e){ alert('my index is ' + e.data.index); }); });
relatedTarget	對(duì)于鼠標(biāo)事件, 標(biāo)示觸發(fā)事件時(shí)離開(kāi)或者進(jìn)入的DOM元素	$("a").mouseout(function(event) { alert(event.relatedTarget); });
currentTarget	冒泡前的當(dāng)前觸發(fā)事件的DOM對(duì)象, 等同于this.	$("p").click(function(event) { alert( event.currentTarget.nodeName ); }); 結(jié)果:P
pageX/Y	鼠標(biāo)事件中, 事件相對(duì)于頁(yè)面原點(diǎn)的水平/垂直坐標(biāo).	$("a").click(function(event) { alert("Current mouse position: " + event.pageX + ", " + event.pageY ); });
result	上一個(gè)事件處理函數(shù)返回的值	$("p").click(function(event) { return "hey" }); $("p").click(function(event) { alert( event.result ); }); 結(jié)果:"hey"
timeStamp	事件發(fā)生時(shí)的時(shí)間戳.	var last; $("p").click(function(event) { if( last ) alert( "time since last event " + event.timeStamp - last ); last = event.timeStamp; });

上面是jQuery官方文檔中提供的event對(duì)象的屬性. 在"jQuery實(shí)戰(zhàn)"一書(shū)中還提供了下面的多瀏覽器支持的屬性, 時(shí)間關(guān)系我沒(méi)有嘗試每一個(gè)屬性, 大家可以幫忙驗(yàn)證是否在所有瀏覽器下可用:

屬性名稱(chēng)	描述	舉例
altKey	Alt鍵是否被按下. 按下返回true
ctrlKey	ctrl鍵是否被按下, 按下返回true
metaKey	Meta鍵是否被按下, 按下返回true. meta鍵就是PC機(jī)器的Ctrl鍵,或者M(jìn)ac機(jī)器上面的Command鍵
shiftKey	Shift鍵是否被按下, 按下返回true
keyCode	對(duì)于keyup和keydown事件返回被按下的鍵. 不區(qū)分大小寫(xiě), a和A都返回65. 對(duì)于keypress事件請(qǐng)使用which屬性, 因?yàn)閣hich屬性跨瀏覽時(shí)依然可靠.
which	對(duì)于鍵盤(pán)事件, 返回觸發(fā)事件的鍵的數(shù)字編碼. 對(duì)于鼠標(biāo)事件, 返回鼠標(biāo)按鍵號(hào)(1左,2中,3右).
screenX/Y	對(duì)于鼠標(biāo)事件, 獲取事件相對(duì)于屏幕原點(diǎn)的水平/垂直坐標(biāo)

事件對(duì)象除了擁有屬性, 還擁有事件. 有一些是一定會(huì)用到的事件比如取消冒泡 stopPropagation() 等.下面是jQuery事件對(duì)象的函數(shù)列表:

名稱(chēng)	說(shuō)明	舉例
preventDefault()	取消可能引起任何語(yǔ)意操作的事件. 比如<a>元素的href鏈接加載, 表單提交以及click引起復(fù)選框的狀態(tài)切換.	$("a").click(function(event){ event.preventDefault(); // do something });
isDefaultPrevented()	是否調(diào)用過(guò) preventDefault() 方法	$("a").click(function(event){ alert( event.isDefaultPrevented() ); event.preventDefault(); alert( event.isDefaultPrevented() ); });
stopPropagation()	取消事件冒泡	$("p").click(function(event){ event.stopPropagation(); // do something });
isPropagationStopped()	是否調(diào)用過(guò) stopPropagation() 方法	$("p").click(function(event){ alert( event.isPropagationStopped() ); event.stopPropagation(); alert( event.isPropagationStopped() ); });
stopImmediatePropagation()	取消執(zhí)行其他的事件處理函數(shù)并取消事件冒泡. 如果同一個(gè)事件綁定了多個(gè)事件處理函數(shù), 在其中一個(gè)事件處理函數(shù)中調(diào)用此方法后將不會(huì)繼續(xù)調(diào)用其他的事件處理函數(shù).	$("p").click(function(event){ event.stopImmediatePropagation(); }); $("p").click(function(event){ // This function won't be executed });
isImmediatePropagationStopped()	是否調(diào)用過(guò) stopImmediatePropagation() 方法	$("p").click(function(event){ alert( event.isImmediatePropagationStopped() ); event.stopImmediatePropagation(); alert( event.isImmediatePropagationStopped() ); });

這些函數(shù)中 stopPropagation() 是我們最長(zhǎng)用的也是一定會(huì)用到的函數(shù). 相當(dāng)于操作原始event對(duì)象的event.cancelBubble=true來(lái)取消冒泡.

九. 總結(jié)

事件是javascript的靈魂, 我花了很久寫(xiě)這篇文章,翻譯jQuery官方的API文檔. 列表中的很多例子直接從官網(wǎng)上摘抄的, 有些列表中的方法我也沒(méi)有用過(guò), 所以如果大家發(fā)現(xiàn)問(wèn)題請(qǐng)及時(shí)通知我修改.

接下來(lái)的文章將分別講解Ajax和動(dòng)畫(huà)效果. 最后通過(guò)講解兩個(gè)我修改的jQuery插件來(lái)學(xué)習(xí)jQuery的插件開(kāi)發(fā).
作者：張子秋
出處：http://www.cnblogs.com/zhangziqiu/

您可能感興趣的文章:

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

從零開(kāi)始學(xué)習(xí)jQuery (五) jquery事件與事件對(duì)象

一.摘要

二.前言

四. jQuery中的事件

五.常用事件函數(shù)舉例

1.bind( type, [data], fn ) 函數(shù)舉例

2. trigger( event, [data] ) 和 triggerHandler( event, [data] )

六.快捷事件 Event Helpers

七. 交互幫助方法

1. hover( over, out )

2. toggle( fn, fn2, fn3,fn4,... )

八.使用jQuery事件對(duì)象

type

target

data

relatedTarget

currentTarget

pageX/Y

result

timeStamp

preventDefault()

isDefaultPrevented()

preventDefault()

stopPropagation()

isPropagationStopped()

stopPropagation()

stopImmediatePropagation()

isImmediatePropagationStopped()

stopImmediatePropagation()

九. 總結(jié)

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線(xiàn)小工具

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线 免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕

從零開(kāi)始學(xué)習(xí)jQuery (五) jquery事件與事件對(duì)象

一.摘要

二.前言

四. jQuery中的事件

五.常用事件函數(shù)舉例

1.bind( type, [data], fn ) 函數(shù)舉例

2. trigger( event, [data] ) 和 triggerHandler( event, [data] )

六.快捷事件 Event Helpers

七. 交互幫助方法

1. hover( over, out )

2. toggle( fn, fn2, fn3,fn4,... )

八.使用jQuery事件對(duì)象

type

target

data

relatedTarget

currentTarget

pageX/Y

result

timeStamp

preventDefault()

isDefaultPrevented()

preventDefault()

stopPropagation()

isPropagationStopped()

stopPropagation()

stopImmediatePropagation()

isImmediatePropagationStopped()

stopImmediatePropagation()

九. 總結(jié)

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線(xiàn)小工具

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕