jquery使用bind vs on click

Question

我在jquery中遇到了几种处理click事件的方法:

绑定:

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

点击:

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

上:

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

两个问题:

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

更新:

正如eveyone提出的那样,我应该更好地阅读文档,并发现我应该使用:

on()或click(),

这实际上是一回事.

但是,没有人解释为什么不再推荐bind？我可能会因为错过显而易见的地方而获得更多的支持,但我在文档中找不到这个原因.

UPDATE2:

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

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

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

Answer 1

从文档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更一致？

Answer 2

对于你的第一个问题:还有.delegate,它被.onjQuery 1.7 取代,但仍然是绑定事件处理程序的有效形式.

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

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

• $('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文档：

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