2013-4-12 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的設(shè)計(jì)機(jī)構(gòu) ，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
來(lái)源：http://www.cnblogs.com/zhangziqiu/archive/2009/05/05/jQuery-Learn-5.html
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
一.摘要
事件是腳本編程的靈魂. 所以本章內(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ù)博客園這片程序員的凈土!
曾經(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ù)的簽名和我們手寫的showMsg簽名相同, 所以可以把showMsg直接賦值給onclick.
這種方式的弊端是:
1. 只能為一個(gè)事件綁定一個(gè)事件處理函數(shù). 使用"="賦值會(huì)把前面為此時(shí)間綁定的所有事件處理函數(shù)沖掉.
2. 在事件函數(shù)(無(wú)論是匿名函數(shù)還是綁定的函數(shù))中獲取事件對(duì)象的方式在不同瀏覽器中要特殊處理:
IE中,事件對(duì)象是window對(duì)象的一個(gè)屬性.事件處理函數(shù)必須這樣訪問(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]訪問(wèn)此參數(shù), 我們也可以指定參數(shù)名稱,上面的代碼等同于:
obj.onclick=function(oEvent)
{
} 目前兼容DOM的瀏覽器有Firefox,Safari,Opera,IE7等.
3. 添加多播委托的函數(shù)在不同瀏覽器中是不一樣的.
下面是在"Javascript公共腳本庫(kù)系列(二): 添加事件多播委托的方法"文章中, 提供的兼容多瀏覽器添加多播委托的方法:
//統(tǒng)一的為對(duì)象添加多播事件委托的方法 /* 參數(shù)說(shuō)明: oTarget : 要添加事件的對(duì)象.比如"document". sEventType : 事件類型.比如單擊事件"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, 我們有了處理對(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)一了事件名稱.
添加多播事件委托時(shí), ie中是事件名稱前面有"on". 但是使用bind()函數(shù)我們不用區(qū)分ie和dom , 因?yàn)閮?nèi)部jQuery已經(jīng)幫我們統(tǒ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:
| 名稱 | 說(shuō)明 | 舉例 |
| 為每一個(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ù)也會(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) { |
| triggerHandler( event, [data] ) | 這個(gè)特別的方法將會(huì)觸發(fā)指定的事件類型上所有綁定的處理函數(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(){ |
| unbind( type, fn ) | bind()的反向操作，從每一個(gè)匹配的元素中刪除綁定的事件。 如果沒(méi)有參數(shù)，則刪除所有綁定的事件。 你可以將你用bind()注冊(cè)的自定義事件取消綁定。 如果提供了事件類型作為參數(shù)，則只刪除該類型的綁定事件。 如果把在綁定時(shí)傳遞的處理函數(shù)作為第二個(gè)參數(shù)，則只有這個(gè)特定的事件處理函數(shù)會(huì)被刪除。 |
把所有段落的所有事件取消綁定: $("p").unbind() 將段落的click事件取消綁定: $("p").unbind( "click" ) 刪除特定函數(shù)的綁定，將函數(shù)作為第二個(gè)參數(shù)傳入: var foo = function () { |
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)行訪問(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ù).
從"開發(fā)人員"的角度方法1要更加簡(jiǎn)單直觀. 但是缺點(diǎn)比較嚴(yán)重. 所以如何取舍請(qǐng)大家自己決定.
one( type, [data], fn ) 函數(shù)和bind一樣, 但是只執(zhí)行一次.
雖然為元素綁定了某些事件, 比如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).
BUG提示:jquery-1.3.2-vsdoc2.js 這個(gè)的官方帶智能提示的類庫(kù), 無(wú)法使用快捷事件, 比如click(), focus(). 使用其他版本的類庫(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.
此類方法在jQuery中英文叫做Event Helpers, 我找不到很好的翻譯方式, 所以按照功能稱其為"快捷方法", 征集好的翻譯名稱!
下面是jQuery的快捷方法列表:
由于都是都是對(duì)應(yīng)的事件, 所以不再寫說(shuō)明和舉例了.
除了基本的實(shí)踐, jQuery提供了兩個(gè)和事件相關(guān)的幫助方法: hover( over, out ) 和 toggle( fn, fn2, fn3,fn4,... )
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è)效果:
注意這里的事件名稱進(jìn)入叫做"mouseenter", 離開叫做"mouseleave", 而不再使用"mouseover"和"mouseleave"事件.
有經(jīng)驗(yàn)的開發(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)題.
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)和文字顏色.
使用事件自然少不了事件對(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ì)象, 需要訪問(wèn)event.srcElement).
下面是jQuery事件對(duì)象可以在擴(kuò)瀏覽器支持的屬性:
| 屬性名稱 | 描述 | 舉例 |
type |
事件類型.如果使用一個(gè)事件處理函數(shù)來(lái)處理多個(gè)事件, 可以使用此屬性獲得事件類型,比如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í)離開或者進(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í)間關(guān)系我沒(méi)有嘗試每一個(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 | 對(duì)于keyup和keydown事件返回被按下的鍵. 不區(qū)分大小寫, a和A都返回65. 對(duì)于keypress事件請(qǐng)使用which屬性, 因?yàn)閣hich屬性跨瀏覽時(shí)依然可靠. |
|
| which | 對(duì)于鍵盤事件, 返回觸發(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ù)列表:
| 名稱 | 說(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)取消冒泡.
事件是javascript的靈魂, 我花了很久寫這篇文章,翻譯jQuery官方的API文檔. 列表中的很多例子直接從官網(wǎng)上摘抄的, 有些列表中的方法我也沒(méi)有用過(guò), 所以如果大家發(fā)現(xiàn)問(wèn)題請(qǐng)及時(shí)通知我修改.
接下來(lái)的文章將分別講解Ajax和動(dòng)畫效果. 最后通過(guò)講解兩個(gè)我修改的jQuery插件來(lái)學(xué)習(xí)jQuery的插件開發(fā).
出品公司：
藍(lán)藍(lán)設(shè)計(jì)(北京蘭亭妙微科技有限公司)是一家專注而深入的設(shè)計(jì)機(jī)構(gòu) ，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的視覺(jué)設(shè)計(jì)、ui界面設(shè)計(jì)、網(wǎng)站建設(shè)、用戶體驗(yàn)服務(wù)，涉及互聯(lián)網(wǎng)、IT軟件、電子、銀行、保健品等多個(gè)行業(yè)，并建立了良好的口碑，積累了豐富的經(jīng)驗(yàn)。
全國(guó)統(tǒng)一服務(wù)熱線 400-608-6026 QQ:896757335
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com