Question

以下代码有什么区别吗？

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

和

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

Answer 1

我认为，不同之处在于使用模式。

我希望.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);
});

通过上述内容，为与选择器匹配的每个元素创建一个单独的处理程序。这意味着

许多匹配元素会创建许多相同的处理程序，从而增加内存占用
动态添加的项目将没有处理程序 - 即，在上面的html中新添加的“Alert！”除非重新绑定处理程序，否则按钮将不起作用。

当我们使用`.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!"); });

通过解除绑定

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

Answer 2

以下代码有什么区别吗？

不，您问题中的两个代码示例之间没有功能差异。 .click(fn)是.on("click", fn)的“快捷方式”。来自the documentation for .on()：

某些事件的简写方法，例如.click()，可用于附加或触发事件处理程序。有关速记方法的完整列表，请参阅events category。

请注意，.on()与.click()的不同之处在于，它可以通过传递selector参数来创建delegated event handlers，而.click()则不会。如果在没有.on()参数的情况下调用selector，则其行为与.click()完全相同。如果您想要事件委派，请使用.on()。

Answer 3

.on()是从jQuery 1.7开始执行所有事件绑定的推荐方法。它将.bind()和.live()的所有功能都汇总到一个函数中，当您传递不同的参数时，它会改变行为。

正如你所写的那样，两者之间没有区别。两者都将处理程序绑定到click #whatever事件。 on()提供了额外的灵活性，允许您将#whatever子项触发的事件委托给单个处理函数（如果您选择）。

// Bind to all links inside #whatever, even new ones created later.
$('#whatever').on('click', 'a', function() { ... });

Answer 4

正如其他答案所述：

$("#whatever").click(function(){ });
// is just a shortcut for
$("#whatever").on("click", function(){ })

注意.on()支持.click()没有的其他几个参数组合，允许它处理事件委派（取代.delegate()和.live()）。

（显然还有其他类似的“keyup”，“focus”等快捷方法。）

我发布额外答案的原因是，如果您在没有参数的情况下致电.click()会发生什么：

$("#whatever").click();
// is a shortcut for
$("#whatever").trigger("click");

注意如果你直接使用.trigger()，你也可以传递额外的参数或jQuery事件对象，这是.click()无法做到的。

我还想提一下，如果你看一下jQuery源代码（在jquery-1.7.1.js中），你会在内部看到.click()（或.keyup()等）函数实际上会调用.on()或.trigger()。显然这意味着你可以放心，他们确实有相同的结果，但这也意味着使用.click()会有更多的开销 - 在大多数情况下无需担心甚至想到任何事情，但理论上它可能会在特殊情况下的事情。

编辑：最后，请注意.on()允许您将多个事件绑定到一行中的同一个函数，例如：

$("#whatever").on("click keypress focus", function(){});

Answer 5

不，没有。
on()的重点是它的其他重载，以及处理没有快捷方法的事件的能力。

Answer 6

它们看起来是一样的......来自click()函数的文档：

此方法是.bind（'click'，handler）
的快捷方式

on()函数的文档：

从jQuery 1.7开始，.on（）方法提供了所需的所有功能用于附加事件处理程序。有关从旧的jQuery转换的帮助事件方法，请参阅.bind（）,. delegate（）和.live（）。删除事件与.on（）绑定，请参阅.off（）。

Answer 7

.click事件仅在呈现元素时起作用，并且仅附加到DOM准备好时加载的元素。

.on事件动态附加到DOM元素，当您想要将事件附加到在ajax请求或其他内容上呈现的DOM元素时（在DOM准备好之后），这会很有用。

Answer 8

在这里，您将获得应用click事件的不同方法列表。你可以选择相应的，或者如果你的点击不起作用，只需尝试其中的替代品。

$('.clickHere').click(function(){ 
     // this is flat click. this event will be attatched 
     //to element if element is available in 
     //dom at the time when JS loaded. 

  // do your stuff
});

$('.clickHere').on('click', function(){ 
    // same as first one

    // do your stuff
})

$(document).on('click', '.clickHere', function(){
          // this is diffrent type 
          //  of click. The click will be registered on document when JS 
          //  loaded and will delegate to the '.clickHere ' element. This is 
          //  called event delegation 
   // do your stuff
});

$('body').on('click', '.clickHere', function(){
   // This is same as 3rd 
   // point. Here we used body instead of document/

   // do your stuff
});

$('.clickHere').off().on('click', function(){ // 
    // deregister event listener if any and register the event again. This 
    // prevents the duplicate event resistration on same element. 
    // do your stuff
})

Answer 9

他们现在已弃用click（），因此最好使用on（'click'）

Answer 10

从互联网和某些朋友那里学到的东西.on（）用于动态添加元素。但是当我在一个简单的登录页面中使用它时，click事件应该将AJAX发送到node.js，并在返回时添加新元素，它开始调用多AJAX调用。当我改为点击（）时，一切都正常。实际上我以前没有遇到过这个问题。

Answer 11

$('.UPDATE').click(function(){ }); **V/S**    
$(document).on('click','.UPDATE',function(){ });

$(document).on('click','.UPDATE',function(){ });

比$（'。UPDATE'）。click（function（）{}）;
它可以使用更少的内存，并可以动态添加元素。
某些时间使用编辑和删除按钮动态获取数据的时间不会以表格中的行数据的EDIT或DELETE DATA的时间生成JQuery事件，此时$(document).on('click','.UPDATE',function(){ });的工作原理与使用jquery提取相同的数据一样有效。按钮在更新或删除时不起作用：

Answer 12

新元素

作为上述综合性答案的附录，如果您希望单击附加到新元素上，则可以突出重点：

由第一个选择器选择的元素，例如$（“ body”）在声明时必须存在，否则没有任何附加条件。
您必须在.on（）函数中使用三个参数，其中包括目标元素的有效选择器作为第二个参数。

.on（'click'）与.click（）之间的区别

12 个答案:

当我们使用`click`

当我们使用`.on`

...使用`.on`

.on（'click'）与.click（）之间的区别

12 个答案:

当我们使用click

当我们使用.on

...使用.on

当我们使用`click`

当我们使用`.on`

...使用`.on`