53

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

绑定：

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

点击：

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

上：

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

两个问题：

  1. 他们还有其他方法吗？
  2. 我应该使用哪一个，为什么？

更新：

正如每个人都乐于建议的那样，我应该更好地阅读文档，并发现我应该使用：

on() 或 click()，

这实际上是同一件事。

但是，没有人解释为什么不再推荐 bind ？我可能会因为在某处遗漏明显的东西而受到更多的反对，但我在文档中找不到这样做的原因。

更新2：

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

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

此代码将单击处理程序添加到具有“myClass”类的元素。但是，如果稍后动态添加更多 myClass 元素，它们也会自动获取点击处理程序，而无需显式调用“on”。据我了解人们所说，这也更有效（见下面的西蒙斯回答）。

4

3 回答 3

40

从 and 的文档bind中click：

绑定：

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

源清楚地表明没有理由使用bind，因为这个函数只调用更灵活的on函数，甚至没有更短：

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

所以我建议，就像 jQuery 团队一样，忘记旧bind功能，它现在已经没用了。它只是为了与旧代码兼容，它仍然在这里。

点击：

此方法是 .on('click', handler) 的快捷方式

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

于 2013-03-27T12:00:06.707 回答
15

对于您的第一个问题：还有.delegate，从 jQuery 1.7 开始已被取代.on，但仍然是绑定事件处理程序的有效形式。

对于您的第二个问题：您应该始终.on像文档说的那样使用，但您还应该注意如何使用.on，因为您可以将事件处理程序绑定到对象本身或更高级别的元素上，并像使用.delegate.

假设您有一个ul > li列表，并且想要将鼠标悬停事件绑定到lis。现在有两种方法：

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

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

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

于 2013-03-27T12:17:56.993 回答
5

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

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

于 2013-03-27T12:04:18.847 回答