jquery use of bind vs on click

jquery use of bind vs on click

本文关键字：on click vs bind use of jquery      更新时间：2023-09-26

我在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'的元素添加了一个click处理程序。但是，如果稍后动态添加更多myClass元素，它们也会自动获得click处理程序，而不必显式调用'on'。从我所理解的人们所说的来看，这也更有效率(参见下面Simons的回答)。

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来更加一致呢?

对于你的第一个问题:还有.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() {});来节省大量的时间，为每个元素附加事件处理程序

我认为你应该在发布这个问题之前搜索jquery文档:

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

相关文章：