.on（'click'）与.click（）之间的区别

2018-06-24 03:24:02

下面的代码有什么区别吗？

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

和

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

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

我宁愿.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);
});

通过上面的描述，为每个匹配选择器的单个元素创建一个单独的处理程序。这意味着

许多匹配元素会创建许多相同的处理程序，从而增加内存占用量

动态添加的项目不会有处理程序 - 即在上面的html中新添加的“Alert！” 除非重新绑定处理程序，否则按钮将不起作用。

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

使用上面的代码，为所有匹配选择器的元素（包括动态创建的元素）提供一个处理程序。

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

如果使用.on("click", handler)添加处理程序，通常会使用.off("click", handler)将其删除，这将删除该处理程序。显然这只有在你有一个函数的引用时才有效，那么如果你不这样做呢？你使用命名空间：

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

与解除绑定通过

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

下面的代码有什么区别吗？

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

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

需要注意的是.on()不同于.click()它具有通过传递来创建委托的事件处理程序的能力selector参数，而.click()没有。当.on()被调用没有selector参数，它的行为完全一样.click() 如果你想要事件委托，使用.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() { ... });

链接地址: http://www.djcxy.com/p/67639.html