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

Posted 2023-04-13

技术标签:

【中文标题】.on(\'click\') 与 .click() 之间的区别【英文标题】：Difference between .on('click') vs .click().on('click') 与 .click() 之间的区别 【发布时间】：2012-02-25 16:23:26 【问题描述】：

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

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

和

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

【问题讨论】：

【参考方案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 中新添加的“警报！”除非您重新绑定处理程序，否则按钮将不起作用。

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

【讨论】：

怎么样：$('button.alert').on('click', function() alert(1); ); ? @andreister ：如果我错了，请纠正我，但我相信另一个优点是在使用 on('click' ...) 时使用命名空间，请参阅 ***.com/a/3973060/759452 即。 on('click.darkenallothersections' ...) 并同时拥有 on('click.displaynextstep' ...) ，然后我只能解绑我使用 .unbind('click.displaynextstep') 选择的那个【参考方案2】：

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

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

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

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

【讨论】：

我的@andreister 指出的性能问题怎么样？ @rubo77 充其量可以忽略不计。我们用的是个位数的毫秒数。 @RoryMcCrossan 这对我来说很重要 - 我正在寻找这个，因为我在需要事件的页面上有多达 3000 个问题。每个 1 毫秒使我的页面执行时间延长 3 秒。您的评论对大型列表没有帮助。更大的问题是为什么一个页面上有 3000 个问题。如果你遵循良好的 UI 模式，你就不应该在页面上拥有那么多信息。查看分页或延迟加载。即使使用事件委托来为所有这些元素提供一个事件处理程序也会更好。 @rubo77 - 只有在使用event delegation 通过传递selector 参数时才能看到性能提升。如果您在没有 selector 参数的情况下调用 .on()，则与使用 .click() 相比没有性能改进。【参考方案3】：

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

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

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

【讨论】：

"绑定到 #whatever 内的所有链接，甚至是以后创建的新链接。"这不正是.live() 所做的吗？此外，这似乎与其他答案相矛盾，即它仅具有.click() 的功能，因此不适用于未来的事件。 @babonk - 这与其他答案并不矛盾，因为正如 Interrobang 在第一段中所说，.on() 可以做 .click() 所做的事情和做 @987654334 所做的事情@ 和 .live() 做 - 这取决于你用什么参数调用它。（其他一些答案也提到了这一点。）请注意，尽管“绑定到#whatever 中的所有链接”不是.live() 所做的，而是.delegate() 所做的。 .live() 绑定到 document 内部的所有内容，而不是让您指定容器。另请注意，.live() 从 jQuery 1.7 开始已弃用。 +1 用于委托事件：“通过选择一个保证在附加委托事件处理程序时存在的元素，您可以使用委托事件来避免频繁附加和删除事件的需要处理程序。” api.jquery.com/on【参考方案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());

【讨论】：

【参考方案5】：

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

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

【讨论】：

【参考方案6】：

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

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

【讨论】：

$('.clickHere').off().on() 正是我所需要的。谢谢！【参考方案7】：

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

【讨论】：

【参考方案8】：

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

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

来自on() 函数的文档：

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

【讨论】：

【参考方案9】：

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

【讨论】：

【参考方案10】：

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

【讨论】：

【参考方案11】：

新元素

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

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

【讨论】：

【参考方案12】：

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

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

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

【讨论】：

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

以上是关于.on('click') 与 .click() 之间的区别的主要内容，如果未能解决你的问题，请参考以下文章

Vue之@click事件修饰符@click.stop与@click.prevent按键修饰符@keyup.enter

Click on 与click有区别吗？

vue2.0那些坑之使用elementUI后v-on:click事件不生效问题

click away 和click on

python之ActionChains方法列表

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

当我们使用click

当我们使用.on

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

当我们使用`click`

当我们使用`.on`

...使用`.on` 的另一个原因