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相同:

方法1便於儲存和尋找資料. 但是自訂屬性透過不W3C驗證.

方法2必須要自己想辦法儲存資料, 並且要制定規則查找指定元素的資料.

從"開發人員"的角度方法1要更加簡單直觀. 但是缺點比較嚴重. 所以如何取捨請大家自己決定.

one( type , [data], fn ) 函數和bind一樣, 但是只執行一次.

2. trigger( event, [data] ) 和 triggerHandler( event, [data] )

雖然為元素綁定了某些事件, 例如click, 但是有時希望在程式中觸發這些事件, 這兩個函數可以實現此功能.

主要區別是trigger會出發瀏覽器預設的動作, 而triggerHandler不會出發.

透過下面的實例可以明確的區分這兩個函數:

<!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元素獲得了焦點:

點擊".triggerHandler"按鈕時, 只呼叫一次,並且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>

重置程式碼

自動運行

提交

預覽 Clear