Question

我在jquery中遇到过几种处理点击事件的方法：

结合：

$('#mydiv').bind('click', function() {
    ...
});

点击：

$('#mydiv').click(function() {
   ...
}

在：

$('mydiv').on('click', function() {
   ...
}

两个问题：

他们还有其他办法吗？
我应该使用哪一个？为什么？

更新：

正如eveyone的建议，我应该更好地阅读文档，并发现我应该使用：

on（）或click（），

实际上是同一件事。

然而，没有人解释为什么不再推荐bind？我可能会因为错过显而易见的地方而得到更多的支持，但我在文件中找不到理由。

UPDATE2：

'on'具有能够将事件处理程序添加到动态创建的元素的有用效果。 e.g。

$('body').on('click',".myclass",function() {
    alert("Clicked On MyClass element");
});

此代码为具有“myClass”类的元素添加了一个单击处理程序。但是，如果稍后动态添加更多myClass元素，它们也会自动获得点击处理程序，而不必显式调用'on'。据我所知，人们说，这也更有效率（见下面的西蒙斯答案）。

Answer 1

来自bind和click的文档：

bind：

从jQuery 1.7开始，.on（）方法是首选方法将事件处理程序附加到文档。

The source表明没有理由使用bind，因为此函数只调用更灵活的on函数，甚至不会更短：

bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
},

所以我建议，就像jQuery团队一样，忘记旧的bind函数，这个函数现在没用了。它仅用于与旧代码的兼容性，它仍然在这里。

click：

此方法是.on（'click'，handler）
的快捷方式

此快捷方式当然不如on函数强大且灵活，并且不允许委派，但它允许您在应用时编写更短且可以说更易读的代码。关于这一点的观点不同：一些开发人员认为应该避免它，因为它只是一个捷径，并且还有一个事实是你需要在使用委托后立即用on替换它，所以为什么不直接使用on更加一致？

Answer 2

关于你的第一个问题：还有.delegate，自jQuery 1.7起被.on取代，但仍然是绑定事件处理程序的有效形式。

关于你的第二个问题：你应该像文档一样使用.on，但是你也应该注意如何使用.on，因为你可以在对象本身上绑定事件处理程序或更高级别的元素，并将其委托给.delegate。

假设您有一个ul > li列表，并希望将鼠标悬停事件绑定到li。现在有两种方式：

$('ul li').on('mouseover', function() {});
$('ul').on('mouseover', 'li', function() {});

第二个是首选，因为有了这个，事件处理程序一次绑定到ul元素，jQuery将通过event.currentTarget（jQuery API）获取实际目标项，而在第一个示例中将它绑定到每个列表元素。此解决方案也适用于在运行时添加到DOM的列表项。

这不仅适用于parent > child元素。如果您对页面上的每个锚点都有一个单击处理程序，则应该使用$(document.body).on('click', 'a', function() {});而不是$('a').on('click', function() {});来节省大量时间将事件处理程序附加到每个元素。

Answer 3

我认为您应该在发布此问题之前搜索jquery docs：

从jQuery 1.7开始，.on（）方法是将事件处理程序附加到文档的首选方法。

jquery使用bind vs on click

3 个答案: