以下代码有什么区别吗？

$('#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!"); });

带有未绑定的via

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

来自: stackoverflow.com