jQuery的使用绑定的VS上点击(jquery use of bind vs on click)

2019-07-28 08:14发布

我所遇到的几种方法在处理jQuery的单击事件:

绑定:

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

点击:

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

上:

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

两个问题:

  1. 他们是这样做的任何其他方式?
  2. 哪一个我应该使用,为什么?

更新:

作为eveyone了有益的建议,我应该有更好的阅读文档,并发现我应该使用:

在()或点击()

这实际上是相同的事情。

但是,没有人解释为什么绑定不再被推荐? 我可能会得到更多downvotes某处缺少明显的,但我不能找出文档中的一个原因。

UPDATE2:

“上”具有能够添加的事件处理程序来动态地创建的元素的有用的效果。 例如

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

该代码添加一个单击处理程序与一类“MyClass的”的元素。 但是,如果有更多的myClass的元素,然后动态地添加后,他们自动获得单击处理为好,而无需“开”显式调用。 从我了解的人说,这也是更有效(见下文西蒙斯接听)。

Answer 1:

从文档bindclick

绑定 :

在jQuery 1.7中,。对()方法是用于事件处理程序安装到一个文件的优选方法。

来源清楚,没有理由使用bind ,因为该功能仅调用更灵活on功能,甚至没有短:

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

所以,我建议,就像jQuery开发团队,忘记旧的bind功能,这是现在没有用了。 这只是为了与旧的代码,它仍然是这里的兼容性。

点击 :

此方法是。对一个快捷方式(“点击”,处理程序)

此快捷方式当然是用不到的功能强大且灵活的on功能,并且不允许代表团,但它可以让你写一个短的,也可以说,稍微更可读的代码时,它适用。 意见分歧在这一点上:一些开发商认为,应该避免,因为它仅仅是一个快捷方式,也有你需要替换它其实on ,只要你使用委托,那么为什么不直接使用on更是否一致?



Answer 2:

第一个问题:这里还有.delegate ,这是所取代.on在jQuery 1.7,但仍是结合事件处理程序的有效形式。

你的第二个问题:你应该总是使用.on像的文档说,但你也应该支付的关注如何使用.on了,因为你可以绑定一个对象本身的事件处理程序或更高级别的元素并委派它像与.delegate

假设你有一个ul > li列表,并希望绑定鼠标悬停事件给li秒。 现在有两种方法:

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

第二个是最好的,因为这一个事件处理程序被绑定到UI元素一次和jQuery将通过获得实际的目标项目event.currentTarget ( jQuery的API ),而在第一个例子中,你将它绑定到每一个列表元素。 该解决方案也将工作的运行时期间被添加到DOM列表项。

这不只是为了工作parent > child元素。 如果你有一个点击处理程序,每个页面上的锚,你应该宁愿使用$(document.body).on('click', 'a', function() {}); 而不是仅仅$('a').on('click', function() {}); 来了很多时间附加的事件处理程序保存到每一个元素。



Answer 3:

我认为你应该已经搜查了jQuery的文档发布这个问题之前:

在jQuery 1.7中,。对()方法是用于事件处理程序安装到一个文件的优选方法。



文章来源: jquery use of bind vs on click