以下代码有什么区别吗？
$('#whatever').on('click', function() {
/* your code here */
});
和
$('#whatever').click(function() {
/* your code here */
});
and*_*ter 732
我认为,不同之处在于使用模式.
我更喜欢.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);
});
如上所述,为匹配选择器的每个元素创建一个单独的处理程序.这意味着
.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");
gil*_*ly3 36
以下代码有什么区别吗？
不,您的问题中的两个代码示例之间没有功能差异. .click(fn)是一种"快捷方法" .on("click", fn).从以下文档.on():
请注意,它的.on()不同之处.click()在于它能够通过传递参数来创建委托事件处理程序selector,而.click()不是.在.on()没有selector参数的情况下调用时,它的行为完全相同.click().如果您想要事件委派,请使用.on().
Int*_*ang 22
.on()是从jQuery 1.7开始执行所有事件绑定的推荐方法.它推出的所有两者的功能.bind()和.live()为您传递不同的参数改变行为的一个功能.
正如你写的那样,两者之间没有区别.两者都将处理程序绑定到click事件#whatever.on()如果您愿意,可以提供额外的灵活性,允许您将子项触发的事件委托#whatever给单个处理函数.
// Bind to all links inside #whatever, even new ones created later.
$('#whatever').on('click', 'a', function() { ... });
nnn*_*nnn 19
正如其他答案所述:
$("#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(){});
小智 8
.click 事件仅在呈现元素时起作用,并且仅附加到DOM准备好时加载的元素.
.on 事件动态附加到DOM元素,当您想要将事件附加到在ajax请求或其他内容上呈现的DOM元素时(在DOM准备好之后),这会很有用.
在这里，您将获得应用click事件的不同方式的列表。您可以选择适当的选择，或者如果单击不起作用，请尝试使用其他方法。
$('.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
})
| 归档时间： |
|
| 查看次数： |
337961 次 |
| 最近记录： |