从零开始学习jQuery (五) 事件与事件对象
本系列文章導(dǎo)航
從零開始學(xué)習(xí)jQuery (一) 開天辟地入門篇
從零開始學(xué)習(xí)jQuery (二) 萬能的選擇器
從零開始學(xué)習(xí)jQuery (三) 管理jQuery包裝集
從零開始學(xué)習(xí)jQuery (四) 使用jQuery操作元素的屬性與樣式
從零開始學(xué)習(xí)jQuery (五) 事件與事件對象
從零開始學(xué)習(xí)jQuery (六) jQuery中的Ajax
從零開始學(xué)習(xí)jQuery (七) jQuery動(dòng)畫-讓頁面動(dòng)起來!
從零開始學(xué)習(xí)jQuery (八) 插播:jQuery實(shí)施方案
從零開始學(xué)習(xí)jQuery (九) jQuery工具函數(shù)
從零開始學(xué)習(xí)jQuery (十) jQueryUI常用功能實(shí)戰(zhàn)
從零開始學(xué)習(xí)jQuery (十一) 實(shí)戰(zhàn)表單驗(yàn)證與自動(dòng)完成提示插件
?
?
一.摘要
事件是腳本編程的靈魂. 所以本章內(nèi)容也是jQuery學(xué)習(xí)的重點(diǎn). 本文將對jQuery中的事件處理以及事件對象進(jìn)行詳細(xì)的講解.?
?
二.前言
本篇文章是至今為止本系列內(nèi)容最多的一篇, 足以可見其重要性.? 大家反映要多列舉示例. 我會在時(shí)間允許的情況下盡量多列舉示例. 真正的投入生產(chǎn)使用的實(shí)例暫時(shí)還無法加入到文章中, 但是可能最后我會列舉一些作品供大家借鑒. 另外本人水平有限, 因?yàn)槲也皇荱I設(shè)計(jì)師. 文章可能有錯(cuò)誤的地方, 希望大家?guī)兔χ赋? 一起學(xué)習(xí)一起進(jìn)步. 在技術(shù)的世界里我們是沒有任何利益瓜葛. 希望大家都抱著彼此鼓勵(lì)的心態(tài), 對于回復(fù)中的激進(jìn)評論我也都會考慮, 但是希望能夠彼此尊重, 保護(hù)博客園這片程序員的凈土!
?
三.事件與事件對象
曾經(jīng)在我的 "Javascript公共腳本庫系列(二): 添加事件多播委托的方法" 和 "Javascript公共腳本庫系列(三): 格式化事件對象/事件對象詳解" 兩篇文章中,? 曾講解過javascript中的事件和事件對象.
首先看一下我們經(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)說明了什么是元素屬性, 什么是Dom屬性.這兩種方式的效果相同. 當(dāng)單擊div時(shí)會顯示提示框.
請注意, 雖然效果相同, 但是并不等效.
document.getElementById("testDiv2").onclick = showMsg;
等效于:
注意兩者的區(qū)別了嗎?? 我們常用的修改元素屬性添加事件的方式, 實(shí)際上是建立了一個(gè)匿名函數(shù):
這個(gè)匿名函數(shù)的簽名和我們手寫的showMsg簽名相同, 所以可以把showMsg直接賦值給onclick.
這種方式的弊端是:
1. 只能為一個(gè)事件綁定一個(gè)事件處理函數(shù).? 使用"="賦值會把前面為此時(shí)間綁定的所有事件處理函數(shù)沖掉.
2. 在事件函數(shù)(無論是匿名函數(shù)還是綁定的函數(shù))中獲取事件對象的方式在不同瀏覽器中要特殊處理:
IE中,事件對象是window對象的一個(gè)屬性.事件處理函數(shù)必須這樣訪問事件對象:
obj.οnclick=function(){var oEvent = window.event;}在DOM標(biāo)準(zhǔn)中,事件對象必須作為唯一參數(shù)傳給事件處理函數(shù):
obj.οnclick=function(){var oEvent = arguments[0];}除了使用argument[0]訪問此參數(shù), 我們也可以指定參數(shù)名稱,上面的代碼等同于:
obj.οnclick=function(oEvent){}目前兼容DOM的瀏覽器有Firefox,Safari,Opera,IE7等.
3. 添加多播委托的函數(shù)在不同瀏覽器中是不一樣的.
下面是在"Javascript公共腳本庫系列(二): 添加事件多播委托的方法"文章中,? 提供的兼容多瀏覽器添加多播委托的方法:
//統(tǒng)一的為對象添加多播事件委托的方法 /* 參數(shù)說明: oTarget : 要添加事件的對象.比如"document". sEventType : 事件類型.比如單擊事件"click". fnHandler : 發(fā)生事件時(shí)調(diào)用的方法. 比如一個(gè)靜態(tài)函數(shù)"hideCalendar" 使用舉例: //單擊頁面的任何元素,只要沒有取消冒泡,都可以關(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 οnclick="..."></div>這種通過修改元素屬性添加事件的方式. 盡量使用添加多播事件委托的方式為一個(gè)事件綁定多個(gè)事件處理函數(shù), 比如為document對象的單擊事件添加一個(gè)關(guān)閉彈出層的方法, 使用多播就不會影響document對象原有的事件處理函數(shù).
?
四. jQuery中的事件
有了jQuery,? 我們有了處理對象事件的一系列函數(shù).? 上面基礎(chǔ)知識還是要懂, 但是再也不用自己去實(shí)現(xiàn)處理多播事件委托的函數(shù)了.? 正所謂有了jQuery, 天天喝茶水. 下面是在jQuery中最常使用的bind()方法舉例:
$("#testDiv4").bind("click", showMsg);
我們?yōu)閕d是testDiv4的元素, 添加列click事件的事件處理函數(shù)showMsg.
使用jQuery事件處理函數(shù)的好處:
1. 添加的是多播事件委托.? 也就是為click事件又添加了一個(gè)方法, 不會覆蓋對象的click事件原有的事件處理函數(shù).
$("#testDiv4").bind("click", function(event) { alert("one"); });$("#testDiv4").bind("click", function(event) { alert("two"); });
單擊testDiv4對象時(shí), 依次提示"one"和"two".
2. 統(tǒng)一了事件名稱.??
添加多播事件委托時(shí), ie中是事件名稱前面有"on". 但是使用bind()函數(shù)我們不用區(qū)分ie和dom ,? 因?yàn)閮?nèi)部jQuery已經(jīng)幫我們統(tǒng)一了事件的名稱.
3. 可以將對象行為全部用腳本控制.?
讓HTML代碼部分只注意"顯示"邏輯. 現(xiàn)在的趨勢是將HTML的行為, 內(nèi)容與樣式切分干凈. 其中用腳本控制元素行為, 用HTML標(biāo)簽控制元素內(nèi)容, 用CSS控制元素樣式. 使用jQuery事件處理函數(shù)可以避免在HTML標(biāo)簽上直接添加事件.
下面是基礎(chǔ)的jQuery事件處理函數(shù):
事件處理? Event Handling:
| 名稱 | 說明 | 舉例 |
| bind( type, [data], fn ) | 為每一個(gè)匹配元素的特定事件（像click）綁定一個(gè)事件處理器函數(shù)。 | 當(dāng)每個(gè)段落被點(diǎn)擊的時(shí)候，彈出其文本:? $("p").bind("click", function(){? |
| one( type, [data], fn ) | 為每一個(gè)匹配元素的特定事件（像click）綁定一個(gè)一次性的事件處理函數(shù)。 | 當(dāng)所有段落被第一次點(diǎn)擊的時(shí)候，顯示所有其文本:? $("p").one("click", function(){? |
| trigger( event, [data] ) | 在每一個(gè)匹配的元素上觸發(fā)某類事件。? 這個(gè)函數(shù)也會導(dǎo)致瀏覽器同名的默認(rèn)行為的執(zhí)行。比如，如果用trigger()觸發(fā)一個(gè)'submit'，則同樣會導(dǎo)致瀏覽器提交表單。如果要阻止這種默認(rèn)行為，應(yīng)返回false。 你也可以觸發(fā)由bind()注冊的自定義事件 | 給一個(gè)事件傳遞參數(shù):? $("p").click( function (event, a, b) {? |
| triggerHandler( event, [data] ) | 這個(gè)特別的方法將會觸發(fā)指定的事件類型上所有綁定的處理函數(shù)。但不會執(zhí)行瀏覽器默認(rèn)動(dòng)作. | 如果你對一個(gè)focus事件執(zhí)行了 .triggerHandler() ，瀏覽器默認(rèn)動(dòng)作將不會被觸發(fā)，只會觸發(fā)你綁定的動(dòng)作:? $("#old").click(function(){? |
| unbind( type, fn ) | bind()的反向操作，從每一個(gè)匹配的元素中刪除綁定的事件。? 如果沒有參數(shù)，則刪除所有綁定的事件。 你可以將你用bind()注冊的自定義事件取消綁定。 如果提供了事件類型作為參數(shù)，則只刪除該類型的綁定事件。 如果把在綁定時(shí)傳遞的處理函數(shù)作為第二個(gè)參數(shù)，則只有這個(gè)特定的事件處理函數(shù)會被刪除。 | 把所有段落的所有事件取消綁定:? $("p").unbind()? 將段落的click事件取消綁定:? $("p").unbind( "click" )? 刪除特定函數(shù)的綁定，將函數(shù)作為第二個(gè)參數(shù)傳入:? var foo = function () {? |
五.常用事件函數(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)一了事件對象, 將事件對象作為事件處理函數(shù)的唯一參數(shù)傳遞.
data參數(shù)我們也要通過event.data 進(jìn)行訪問.? 為何要提供data參數(shù)呢?
因?yàn)槲覀兘?jīng)常碰到這樣的問題: 希望在事件處理中根據(jù)事件源的某些數(shù)據(jù)進(jìn)行特殊處理.
目前網(wǎng)上有兩種存在爭議的解決方法:
(1) 使用自定義元素屬性存儲數(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ù)是上一講中的知識, 用于獲取元素的"元素屬性", 而且可以獲取自定義的元素屬性. 單擊div后將顯示:
?
(2) 使用腳本將數(shù)據(jù)傳遞給事件處理函數(shù):
<div id="testDiv6">獲取自定義數(shù)據(jù)-2</div>
元素沒有任何的自定義屬性, 添加事件處理函數(shù)時(shí)將額外的數(shù)據(jù)傳遞:
點(diǎn)擊div后的結(jié)果和方法1相同:
方法1便于存儲和查找數(shù)據(jù). 但是自定義屬性通過不W3C驗(yàn)證.
方法2必須要自己想辦法存儲數(shù)據(jù), 并且要制定規(guī)則查找指定元素的數(shù)據(jù).
從"開發(fā)人員"的角度方法1要更加簡單直觀. 但是缺點(diǎn)比較嚴(yán)重. 所以如何取舍請大家自己決定.
one( type, [data], fn )?函數(shù)和bind一樣, 但是只執(zhí)行一次.
2.?trigger( event, [data] )?和?triggerHandler( event, [data] )
雖然為元素綁定了某些事件, 比如click, 但是有時(shí)希望在程序中觸發(fā)這些事件,? 這兩個(gè)函數(shù)可以實(shí)現(xiàn)此功能.
主要區(qū)別是trigger會出發(fā)瀏覽器默認(rèn)的動(dòng)作, 而triggerHandler不會出發(fā).
通過下面的實(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í), 會調(diào)用兩次Focesed, 并且input元素獲得了焦點(diǎn):
單擊".triggerHandler"按鈕時(shí), 只調(diào)用一次,并且input元素沒有獲得焦點(diǎn):
也就是說, trigger函數(shù)出發(fā)了瀏覽器默認(rèn)的獲取焦點(diǎn)的行為,讓input元素獲得了焦點(diǎn), 所以再次調(diào)用了focus事件處理函數(shù).
triggerHandler只調(diào)用為focus事件綁定的事件處理函數(shù), 而不引發(fā)瀏覽器行為, 所以最后input元素沒有獲得焦點(diǎn).
?
六.快捷事件?Event Helpers?
BUG提示:jquery-1.3.2-vsdoc2.js 這個(gè)最新的官方帶智能提示的類庫, 無法使用快捷事件, 比如click(), focus(). 使用其他版本的類庫則沒有問題.
雖然我們可以使用事件處理函數(shù)完成對象事件的幾乎所有操作, 但是jQuery提供了對常用事件的封裝. 比如單擊事件對應(yīng)的兩個(gè)方法click()和click(fn)分別用來觸發(fā)單擊事件和設(shè)置單擊事件.
設(shè)置單擊事件:
$("#testDiv").click(function(event) { alert("test div clicked ! "); });
等效于:
觸發(fā)單擊事件:
$("#testDiv").click();
等效于
?
注意這里等效的是trigger而不是triggerHandler.
此類方法在jQuery中英文叫做Event Helpers, 我找不到很好的翻譯方式, 所以按照功能稱其為"快捷方法",? 征集好的翻譯名稱!
下面是jQuery的快捷方法列表:
由于都是都是對應(yīng)的事件, 所以不再寫說明和舉例了.
| 名稱 | 說明 | 舉例 |
| 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ù)存在的問題, 看下面這個(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í), 會發(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è)效果:
注意這里的事件名稱進(jìn)入叫做"mouseenter", 離開叫做"mouseleave", 而不再使用"mouseover"和"mouseleave"事件.
有經(jīng)驗(yàn)的開發(fā)人員會立刻想到在制作彈出菜單時(shí), 經(jīng)常遇到這個(gè)問題: 為彈出菜單設(shè)置了mouseout事件自動(dòng)關(guān)閉, 但是鼠標(biāo)在彈出菜單內(nèi)移動(dòng)時(shí)常常莫名其妙觸發(fā)mouseout事件讓菜單關(guān)閉. hover()函數(shù)幫助我們很好的解決了這個(gè)問題.
2.?toggle( fn, fn2, fn3,fn4,... )
toggle函數(shù)可以為對象添加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ù)對這幾個(gè)函數(shù)的輪番調(diào)用。
可以使用unbind("click")來刪除。
下面的示例演示如何使用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"變換一次列表符號和文字顏色.
八.使用jQuery事件對象
使用事件自然少不了事件對象.? 因?yàn)椴煌瑸g覽器之間事件對象的獲取, 以及事件對象的屬性都有差異, 導(dǎo)致我們很難跨瀏覽器使用事件對象.
jQuery中統(tǒng)一了事件對象,? 當(dāng)綁定事件處理函數(shù)時(shí),? 會將jQuery格式化后的事件對象作為唯一參數(shù)傳入:
$("#testDiv").bind("click", function(event) { });
關(guān)于event對象的詳細(xì)說明, 可以參考jQuery官方文檔:?http://docs.jquery.com/Events/jQuery.Event
jQuery事件對象將不同瀏覽器的差異進(jìn)行了合并, 比如可以在所有瀏覽器中通過 event.target 屬性來獲取事件的觸發(fā)者(在IE中使用原生的事件對象, 需要訪問event.srcElement).
下面是jQuery事件對象可以在擴(kuò)瀏覽器支持的屬性:
| 屬性名稱 | 描述 | 舉例 |
type | 事件類型.如果使用一個(gè)事件處理函數(shù)來處理多個(gè)事件, 可以使用此屬性獲得事件類型,比如click. | $("a").click(function(event) {alert(event.type); }); |
target | 獲取事件觸發(fā)者DOM對象 | $("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 | 對于鼠標(biāo)事件, 標(biāo)示觸發(fā)事件時(shí)離開或者進(jìn)入的DOM元素 | $("a").mouseout(function(event) {alert(event.relatedTarget); }); |
currentTarget | 冒泡前的當(dāng)前觸發(fā)事件的DOM對象, 等同于this. | $("p").click(function(event) {alert( event.currentTarget.nodeName );
}); 結(jié)果:P |
pageX/Y | 鼠標(biāo)事件中, 事件相對于頁面原點(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對象的屬性. 在"jQuery實(shí)戰(zhàn)"一書中還提供了下面的多瀏覽器支持的屬性, 時(shí)間關(guān)系我沒有嘗試每一個(gè)屬性, 大家可以幫忙驗(yàn)證是否在所有瀏覽器下可用:
| 屬性名稱 | 描述 | 舉例 |
| altKey | Alt鍵是否被按下. 按下返回true | ? |
| ctrlKey | ctrl鍵是否被按下, 按下返回true | ? |
| metaKey | Meta鍵是否被按下, 按下返回true.? meta鍵就是PC機(jī)器的Ctrl鍵,或者M(jìn)ac機(jī)器上面的Command鍵 | ? |
| shiftKey | Shift鍵是否被按下, 按下返回true | ? |
| keyCode | 對于keyup和keydown事件返回被按下的鍵. 不區(qū)分大小寫, a和A都返回65.? 對于keypress事件請使用which屬性, 因?yàn)閣hich屬性跨瀏覽時(shí)依然可靠. | ? |
| which | 對于鍵盤事件, 返回觸發(fā)事件的鍵的數(shù)字編碼. 對于鼠標(biāo)事件, 返回鼠標(biāo)按鍵號(1左,2中,3右). | ? |
| screenX/Y | 對于鼠標(biāo)事件, 獲取事件相對于屏幕原點(diǎn)的水平/垂直坐標(biāo) | ? |
?
事件對象除了擁有屬性, 還擁有事件. 有一些是一定會用到的事件比如取消冒泡 stopPropagation() 等.下面是jQuery事件對象的函數(shù)列表:
| 名稱 | 說明 | 舉例 |
preventDefault() | 取消可能引起任何語意操作的事件. 比如<a>元素的href鏈接加載, 表單提交以及click引起復(fù)選框的狀態(tài)切換. | $("a").click(function(event){event.preventDefault();// do something }); |
isDefaultPrevented() | 是否調(diào)用過 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)用過 stopPropagation()方法 | $("p").click(function(event){alert( event.isPropagationStopped() );event.stopPropagation();alert( event.isPropagationStopped() ); }); |
stopImmediatePropagation() | 取消執(zhí)行其他的事件處理函數(shù)并取消事件冒泡.? 如果同一個(gè)事件綁定了多個(gè)事件處理函數(shù), 在其中一個(gè)事件處理函數(shù)中調(diào)用此方法后將不會繼續(xù)調(diào)用其他的事件處理函數(shù). | $("p").click(function(event){event.stopImmediatePropagation(); }); $("p").click(function(event){// This function won't be executed }); |
isImmediatePropagationStopped() | 是否調(diào)用過 stopImmediatePropagation()方法 | $("p").click(function(event){alert( event.isImmediatePropagationStopped() );event.stopImmediatePropagation();alert( event.isImmediatePropagationStopped() ); }); |
這些函數(shù)中? stopPropagation()? 是我們最長用的也是一定會用到的函數(shù). 相當(dāng)于操作原始event對象的event.cancelBubble=true來取消冒泡.
?
九. 總結(jié)
事件是javascript的靈魂, 我花了很久寫這篇文章,翻譯jQuery官方的API文檔. 列表中的很多例子直接從官網(wǎng)上摘抄的,? 有些列表中的方法我也沒有用過, 所以如果大家發(fā)現(xiàn)問題請及時(shí)通知我修改.
接下來的文章將分別講解Ajax和動(dòng)畫效果.? 最后通過講解兩個(gè)我修改的jQuery插件來學(xué)習(xí)jQuery的插件開發(fā).
作者：張子秋出處：http://www.cnblogs.com/zhangziqiu/
總結(jié)
以上是生活随笔為你收集整理的从零开始学习jQuery (五) 事件与事件对象的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 从零开始学习jQuery (四) 使用j
- 下一篇： 从零开始学习jQuery (六) AJA