jQuery常用事件函數(shù)舉例
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ù)傳遞:
$("#testDiv6").bind("click", { customer: "customer data 2" }, function(event) { alert(event.data.customer) });點(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 src="http://code.jquery.com/jquery-3.1.1.min.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).
