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