.on('click') 与 .click() 的区别 [英] Difference between .on('click') vs .click()
问题描述
下面的代码有什么区别吗?
$('#whatever').on('click', function() {/* 你的代码在这里 */});和
$('#whatever').click(function() {/* 你的代码在这里 */});我认为，区别在于使用模式.
我更喜欢 .on 而不是 .click 因为前者可以使用更少的内存并且可以处理动态添加的元素.
考虑以下 html:
<button id="add">添加新</button><div id="容器"><button class="alert">alert!</button>我们添加新按钮的地方
$("button#add").click(function() {var html = "<button class='alert'>Alert!</button>";$("button.alert:last").parent().append(html);});并且想要警报！"显示警报.为此，我们可以使用click"或on".
<小时>当我们使用click
$("button.alert").click(function() {警报(1)；});根据上述内容，为每个与选择器匹配的元素创建了一个单独的处理程序.这意味着
- 许多匹配的元素会创建许多相同的处理程序，从而增加内存占用
- 动态添加的项目不会有处理程序 - 即，在上面的 html 中新添加的警报！"除非您重新绑定处理程序，否则按钮将无法工作.
当我们使用.on
$("div#container").on('click', 'button.alert', function() {警报(1)；});有了上面的内容，一个单个处理程序用于与您的选择器匹配的所有元素，包括动态创建的元素.
<小时>...使用 .on
的另一个原因正如 Adrien 在下面评论的那样，使用 .on 的另一个原因是命名空间事件.
如果您使用 .on("click", handler) 添加处理程序，您通常会使用 .off("click", handler) 删除它，这将删除它非常处理.显然，这仅在您有对该函数的引用时才有效，如果没有呢?您使用命名空间:
$("#element").on("click.someNamespace", function() { console.log("anonymous!"); });通过解除绑定
$("#element").off("click.someNamespace");Is there any difference between the following code?
$('#whatever').on('click', function() {
/* your code here */
});
and
$('#whatever').click(function() {
/* your code here */
});
I think, the difference is in usage patterns.
I would prefer .on over .click because the former can use less memory and work for dynamically added elements.
Consider the following html:
<html>
<button id="add">Add new</button>
<div id="container">
<button class="alert">alert!</button>
</div>
</html>
where we add new buttons via
$("button#add").click(function() {
var html = "<button class='alert'>Alert!</button>";
$("button.alert:last").parent().append(html);
});
and want "Alert!" to show an alert. We can use either "click" or "on" for that.
When we use click
$("button.alert").click(function() {
alert(1);
});
with the above, a separate handler gets created for every single element that matches the selector. That means
- many matching elements would create many identical handlers and thus increase memory footprint
- dynamically added items won't have the handler - ie, in the above html the newly added "Alert!" buttons won't work unless you rebind the handler.
When we use .on
$("div#container").on('click', 'button.alert', function() {
alert(1);
});
with the above, a single handler for all elements that match your selector, including the ones created dynamically.
...another reason to use .on
As Adrien commented below, another reason to use .on is namespaced events.
If you add a handler with .on("click", handler) you normally remove it with .off("click", handler) which will remove that very handler. Obviously this works only if you have a reference to the function, so what if you don't ? You use namespaces:
$("#element").on("click.someNamespace", function() { console.log("anonymous!"); });
with unbinding via
$("#element").off("click.someNamespace");
这篇关于.on('click') 与 .click() 的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
