jQuery常用事件函數(shù)舉例
bind( type, [data], fn )?函數(shù)範(fàn)例
bind()是最常使用的函數(shù),? 注意方法簽名上data參數(shù),可以在事件處理之前傳遞一些附加的資料:
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)注意event參數(shù)的使用. jQuery中統(tǒng)一了事件物件, 將事件物件作為事件處理函數(shù)的唯一參數(shù)傳遞.
##data參數(shù)我們也要透過event.data 存取.? 為何要提供data參數(shù)呢?因?yàn)槲覀兘?jīng)常碰到這樣的問題: 希望在事件處理中根據(jù)事件來源的某些資料進(jìn)行特殊處理.目前網(wǎng)路上有兩種有爭議的解決方法:(1) 使用自訂元素屬性儲存資料.
例如:
<div id="testDiv5" customer="customer data 1">獲取自定義數(shù)據(jù)-1</div>在事件處理函數(shù)中獲取資料:
$("#testDiv5").bind("click", function(event) { alert($(event.target).attr("customer")); });attr函數(shù)是上一講中的知識, 用於獲取元素的"元素屬性", 而且可以獲取自定義的元素屬性. 單擊div後面會顯示:
#(2) 使用腳本將資料傳遞給事件處理函數(shù):
<div id="testDiv6">獲取自定義數(shù)據(jù)-2</div>元素沒有任何的自訂屬性, 新增事件處理函數(shù)時將額外的資料傳遞:
$("#testDiv6").bind("click", { customer: "customer data 2" }, function(event) { alert(event.data.customer) });點(diǎn)擊div後的結(jié)果和方法1相同: 
<!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"按鈕時, 會調(diào)用兩次Focesed, 並且input元素獲得了焦點(diǎn):
也就是說, trigger函數(shù)出發(fā)了瀏覽器預(yù)設(shè)的獲取焦點(diǎn)的行為,讓input元素獲得了焦點(diǎn), 所以再次調(diào)用了focus事件處理函數(shù).
triggerHandler只呼叫為focus事件綁定的事件處理函數(shù), 而不引發(fā)瀏覽器行為, 所以最後input元素沒有獲得焦點(diǎn).
