堆栈内存溢出
  繁体   English   中英

.on('click') 与 .click() 之间的区别

[英]Difference between .on('click') vs .click()

 原文  2012-02-03 00:26:14  0   12    jquery/ click

问题描述

下面的代码有什么区别吗？

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

和

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

12 个解决方案

解决方案1
 807 已采纳  2012-08-09 07:52:49

我认为，区别在于使用模式。

我更喜欢.on .click .on因为前者可以使用更少的内存并且可以用于动态添加的元素。

考虑以下 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”或“on”。

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

通过解除绑定

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

解决方案2
 40  2012-02-03 00:31:11

下面的代码有什么区别吗？

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

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

需要注意的是.on()从不同.click()其具有能够创建委托的事件处理程序通过传递selector参数，而.click()没有。 当.on()被调用没有selector参数，它的行为完全一样.click() 如果您想要事件委托，请使用.on() 。

解决方案3
 24  2012-02-03 00:30:50

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

正如您编写的示例一样，两者之间没有区别。 两者都将处理程序绑定到#whatever的click事件。 on()提供了额外的灵活性，允许您将#whatever的子#whatever触发的事件委托给单个处理程序函数，如果您愿意的话。

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

解决方案4
 21  2012-02-03 01:46:36

正如其他答案所提到的：

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

解决方案5
 12  2016-11-29 07:33:30

.click事件仅在元素被渲染时起作用，并且仅在 DOM 准备就绪时附加到加载的元素上。

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

解决方案6
 9  2018-04-16 06:16:04

在这里，您将获得应用点击事件的不同方式的列表。 您可以相应地选择合适的，或者如果您的点击不起作用，请尝试其中的替代方案。

$('.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
})

解决方案7
 9  2012-02-03 00:28:43

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

解决方案8
 9  2012-02-03 00:31:42

它们似乎是相同的...来自click()函数的文档：

此方法是 .bind('click', handler) 的快捷方式

on()函数的文档：

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

解决方案9
 3  2018-12-21 23:13:45

他们现在已经弃用了 click()，所以最好使用 on('click')

解决方案10
 1  2017-12-01 06:04:15

据我从网上和一些朋友了解到，动态添加元素时使用 .on() 。 但是当我在一个简单的登录页面中使用它时，点击事件应该将 AJAX 发送到 node.js 并在返回时附加新元素，它开始调用多 AJAX 调用。 当我将其更改为 click() 时，一切正常。 其实我以前没有遇到过这个问题。

解决方案11
 0  2020-03-11 04:35:12

新元素

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

  1. 由第一个选择器选择的元素，例如 $("body") 必须在声明时存在，否则没有任何附加内容。
  2. 您必须使用 .on() 函数中的三个参数，包括目标元素的有效选择器作为第二个参数。

解决方案12
 -1  2018-07-10 11:52:30

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

$(document).on('click','.UPDATE',function(){ });
  1. 它比 $('.UPDATE').click(function(){ }); 更有效。
  2. 它可以使用更少的内存并为动态添加的元素工作。
  3. 有时使用编辑和删除按钮动态获取的数据在表单中的行数据的编辑或删除数据时不会生成 JQuery 事件，当时$(document).on('click','.UPDATE',function(){ }); 使用 jquery 可以像获取相同的数据一样有效地工作。 按钮在更新或删除时不起作用：

在此处输入图片说明

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 jQuery的.on（&#39;click&#39;）和.click（）之间的区别 on（&#39;click&#39;）vs on（&#39;tapone&#39;）之间的区别 jQuery：.click（）和.on（“click”）之间的区别 .on('click') 和 .off('click').on('click') 之间的区别 attr（&#39;disabled&#39;，true）与unbind（&#39;click&#39;）之间的区别 razor 视图中 jQuery.on('click') 与 html 事件之间的区别 this.click（）和$（this）.click（）有什么区别？ `.click（handler（））`和`.click（handler）`之间的区别 .on（&#39;click tap&#39;）和.on（&#39;click || tap&#39;）有什么区别？ jQuery：程序化点击和手动点击之间有区别吗？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM