問題

以下程式碼有什麼區別嗎?

 $('#whatever').on('click', function() {
     /* your code here */
});
 

 $('#whatever').click(function() {
     /* your code here */
});
 

  最佳答案

我認為,差異在於使用模式.

我更喜歡.on超過.click,因為前者可以使用較少的記憶體並適用於動態新增的元素.

考慮以下html:

 <html>
    <button id="add">Add new</button>
    <div id="container">
        <button class="alert">alert!</button>
    </div>
</html>
 

我們透過新增新按鈕

 $("button#add").click(function() {
    var html = "<button class='alert'>Alert!</button>";
    $("button.alert:last").parent().append(html);
});
 

並希望“警報”顯示警報.我們可以使用“點選”或“點選”.


當我們使用click

 $("button.alert").click(function() {
    alert(1);
});
 

使用上面,為匹配選擇器的每個元素建立單獨的處理程式.這意味著

  1. 許多匹配元素會建立許多相同的處理程式,從而增加記憶體足跡
  2. 動態新增的專案不會有處理程式 – 即,在上面的html中,新新增的“警報!”按鈕將不起作用,除非您退回處理程式.

當我們使用.on

 $("div#container").on('click', 'button.alert', function() {
    alert(1);
});
 

使用以上內容,所有與選擇器匹配的元素,包括動態建立的元素的單個處理程式。


...使用.on的另一個原因

正如下面Adrien評論的那樣,使用.on的另一個原因是名稱空間事件。

如果您使用.on("click", handler)新增一個處理程式,您通常使用.off("click", handler)刪除它,它將刪除該處理程式.顯然這隻有在您對函式有引用時才有效,那麼如果您沒有?您使用名稱空間:

 $("#element").on("click.someNamespace", function() { console.log("anonymous!"); });
 

android – 透過無繫結

 $("#element").off("click.someNamespace");
 

  相同標籤的其他問題

jqueryclick