.on('click')和.click()的区别

下面的代码有区别吗?

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

而且

$('#whatever').click(function() {
/* your code here */
});
401732 次浏览
小开

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

小开

.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() { ... });
小开

下面的代码有区别吗?

不，您问题中的两个代码示例之间没有功能差异。.click(fn)是.on("click", fn)的“快捷方法”。从# EYZ3:

对于一些事件(如.click())，有一些简写方法可用于附加或触发事件处理程序。要获得完整的速记方法列表，请参阅事件类别。

注意，.on()与.click()的不同之处在于，它能够通过传递selector参数来创建委托事件处理程序，而.click()则不能。当不带selector参数而调用.on()时，它的行为与.click()完全相同。如果需要事件委托，请使用.on()。

小开

它们看起来是一样的……click ()函数的文档:

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

在()函数的文档:

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

小开

正如其他答案所提到的:

$("#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(){});
小开
最佳答案

我认为，区别在于使用模式。

我更喜欢.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"来表示。

当我们使用click

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

使用上述方法，将为匹配选择器的每一个元素创建一个单独的处理程序。这意味着

  1. 许多匹配的元素将创建许多相同的处理程序，从而增加内存占用
  2. 动态添加的项目不会有处理程序——例如，在上面的html中，新添加的“Alert!”按钮将不起作用，除非你重新绑定处理程序。

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

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

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

小开

从互联网和一些朋友那里了解到，.on()用于动态添加元素。但是当我在一个简单的登录页面中使用它时，点击事件应该发送AJAX到node.js，并返回追加新元素，它开始调用多AJAX调用。当我把它改成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
})
小开 
$('.UPDATE').click(function(){ }); **V/S**
$(document).on('click','.UPDATE',function(){ });


$(document).on('click','.UPDATE',function(){ });
  1. 它比$('.UPDATE').click(function(){})更有效;
  2. 它可以使用更少的内存，并为动态添加的元素工作。
  3. 有时动态提取数据时，编辑和删除按钮不生成JQuery事件时，编辑或删除数据的行数据在表单中，$(document).on('click','.UPDATE',function(){ });是有效的工作与相同的提取数据使用JQuery。更新或删除时按钮不工作:

enter image description here

小开

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

小开

新元素

如果你想点击附加到新元素，作为上述综合答案的补充，以突出关键点:

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

提交答案