.on（'click'）和.click（）之间的差异 [英] Difference between .on('click') vs .click()
问题描述
以下代码之间有什么区别？
$（'＃whatever' function（）{
/ *你的代码在这里* /
}）;
和
$（'＃whatever'）。click（function（）{
/ * your code here * /
}）;
我认为，区别在于使用模式。
我宁愿 .on 超过 .click 前者 可以使用更少的内存，并为动态添加的元素工作。
考虑下面的html：
< html>
< button id =add>添加新< / button>
< div id =container>
< button class =alert>提醒！< / button>
< / div>
< / html>
我们通过
添加新按钮 $（button＃add）。click（function（）{
var html =< button class ='alert'> Alert！< / button& ;
$（button.alert：last）。parent（）。append（html）;
}）;
并且想要提醒！以显示警报。我们可以使用点击或打开。
当我们使用时，单击
$（button.alert）click（function（）{
alert（1）;
}）;上面的 处理程序被创建为 每一个 处理程序都会被创建为
单个元素。这意味着
- 许多匹配元素将创建许多相同的处理程序，从而增加内存占用量
- 项目将不会有处理程序 - 即，在上面的html中新添加的Alert！
- 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.
当我们使用 .on
$（div＃container）。on（'click'，'button.alert'，function {
alert（1）;
}）;
使用上述 / em>。
...使用<$ c的另一个原因$ c> .on
正如Adrien在下面说的，另一个使用 .on 是命名空间事件。
如果你添加一个处理程序 .on（click，handler） c $ c> .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
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屋！
