gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 05:19:54 31 4
gpt4 key购买 nike

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

$('#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”或“on”来实现。

<小时/>

当我们使用点击

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

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

  1. 许多匹配元素会创建许多相同的处理程序,从而增加内存占用
  2. 动态添加的项目不会有处理程序 - 即,在上面的 html 中新添加的“Alert!”除非您重新绑定(bind)处理程序,否则按钮将无法工作。

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

通过解除绑定(bind)

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

关于jquery - .on ('click' ) 与 .click() 之间的区别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45316854/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com