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

下面的代码有区别吗?

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

and

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

当前回答

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

2018-12-21 23:13:45

其他回答

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

我更喜欢.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);
});

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

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

当我们使用。on

$("div#container").on('click', 'button.alert', function() {
    alert(1);
});

使用上述方法，所有匹配选择器的元素都有一个处理程序，包括动态创建的元素。

.．.使用.on的另一个原因

正如Adrien在下面评论的那样，使用.on的另一个原因是名称空间事件。

如果你添加了一个带有。on("click"，处理程序)的处理程序，你通常会使用。off("click"，处理程序)删除它，这将删除该处理程序。显然，只有当您有对函数的引用时，这才有效，那么如果没有呢?你可以使用命名空间:

$("#element").on("click.someNamespace", function() { console.log("anonymous!"); });

通过解绑定

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

2012-08-09 07:52:49

在这里，您将获得应用点击事件的不同方式的列表。你可以选择相应的，如果你的点击不工作，只是尝试一个替代这些。

$('.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
})

2018-04-16 06:16:04

从互联网和一些朋友那里了解到，.on()用于动态添加元素。但是当我在一个简单的登录页面中使用它时，点击事件应该发送AJAX到node.js，并返回追加新元素，它开始调用多AJAX调用。当我把它改成click()时，一切都很顺利。其实我以前没有遇到过这个问题。

2017-12-01 06:04:15

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

2018-12-21 23:13:45

正如其他答案所提到的:

$("#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(){});

2012-02-03 01:46:36

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

推荐文章

最新文章

标签