jquery 使用绑定与点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15658231/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery use of bind vs on click
提问by SteveP
I have come across several methods for handling click events in jquery:
我在 jquery 中遇到过几种处理点击事件的方法：
bind:
绑定：
$('#mydiv').bind('click', function() {
...
});
click:
点击：
$('#mydiv').click(function() {
...
}
on:
在：
$('mydiv').on('click', function() {
...
}
Two questions:
两个问题：
- Are they any other ways of doing this?
- Which one should I use, and why ?
- 他们还有其他方法可以做到这一点吗？
- 我应该使用哪一个，为什么？
UPDATE:
更新：
As eveyone has helpfully suggested, I should have read the docs better, and found out that I should use:
正如 eveyone 有帮助的建议，我应该更好地阅读文档，并发现我应该使用：
on() or click(),
on() 或 click()，
which are effectively the same thing.
这实际上是同一件事。
However, nobody has explained why bind is no longer recommended ? I'll probably get more downvotes for missing the obvious somewhere, but I can't find a reason for this in the documents.
但是，没有人解释为什么不再推荐 bind ？我可能会因为在某处遗漏了明显的东西而得到更多的反对，但我在文档中找不到原因。
UPDATE2:
更新2：
'on' has the useful effect of being able to add event handlers to dynamically created elements. e.g.
'on' 具有能够向动态创建的元素添加事件处理程序的有用效果。例如
$('body').on('click',".myclass",function() {
alert("Clicked On MyClass element");
});
This code adds a click handler to elements with a class of 'myClass'. However, if more myClass elements are then dynamically added later, they automatically get the click handler as well, without having to explicitly call 'on'. From what I understand people are saying, this is also more efficient (see Simons answer below).
此代码向具有“myClass”类的元素添加点击处理程序。但是，如果稍后动态添加更多 myClass 元素，它们也会自动获取点击处理程序，而无需显式调用“on”。据我了解人们所说，这也更有效（请参阅下面的西蒙斯回答）。
采纳答案by Denys Séguret
From the documentation of bindand click:
从文档bind和click：
bind:
绑定：
As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.
从 jQuery 1.7 开始， .on() 方法是将事件处理程序附加到文档的首选方法。
The sourcemakes it clear there's no reason to use bind, as this function only calls the more flexible onfunction without even being shorter :
来源明确表示没有理由使用bind，因为此函数仅调用更灵活的on函数而不会更短：
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
},
So I'd suggest, just like the jQuery team, to forget the old bindfunction, which is now useless. It's only for compatibility with older code that it's still here.
所以我建议，就像 jQuery 团队一样，忘记旧的bind函数，它现在没用了。它只是为了与旧代码兼容，它仍然存在。
点击：
This method is a shortcut for .on('click', handler)
此方法是 .on('click', handler) 的快捷方式
This shortcut is of course less powerful and flexible than the onfunction and doesn't allow delegation but it lets you write a shorter and, arguably, slightly more readable, code when it applies. Opinions diverge on that point : some developers argue that it should be avoided as it is just a shortcut, and there's also the fact that you need to replace it with onas soon as you use delegation, so why not directly use onto be more consistent ?
这个快捷方式当然没有on函数那么强大和灵活，并且不允许委托，但是当它应用时，它可以让您编写更短，可以说更具可读性的代码。在这一点上意见分歧：一些开发者认为应该避免它，因为它只是一个捷径，还有一个事实是on你一使用委托就需要替换它，那么为什么不直接使用on更一致呢？
回答by Simon
To your first question: there's also .delegate, which was superseded by .onas of jQuery 1.7, but still is a valid form of binding event handlers.
对于您的第一个问题：还有.delegate，它.on从 jQuery 1.7 开始被取代，但仍然是绑定事件处理程序的有效形式。
To your second question: You should always use .onlike the docs say, but you should also pay attention on how to use .on, because you can either bind the event handler on an object itself or a higher level element and delegate it like with .delegate.
对于您的第二个问题：您应该始终.on像文档所说的那样使用，但您还应该注意如何使用.on，因为您可以将事件处理程序绑定到对象本身或更高级别的元素上，并像使用.delegate.
Say you have an ul > lilist and want to bind a mouseover event to the lis. Now there are two ways:
假设您有一个ul > li列表并希望将鼠标悬停事件绑定到lis。现在有两种方式：
$('ul li').on('mouseover', function() {});$('ul').on('mouseover', 'li', function() {});
$('ul li').on('mouseover', function() {});$('ul').on('mouseover', 'li', function() {});
The second one is preferable, because with this one the event handler gets bound to the ul element once and jQuery will get the actual target item via event.currentTarget(jQuery API), while in the first example you bind it to every single list element. This solution would also work for list items that are being added to the DOM during runtime.
第二个更可取，因为有了这个，事件处理程序被绑定到 ul 元素一次，jQuery 将通过event.currentTarget( jQuery API)获取实际的目标项目，而在第一个示例中，您将它绑定到每个列表元素。此解决方案也适用于在运行时添加到 DOM 的列表项。
This doesn't just work for parent > childelements. If you have a click handler for every anchor on the page you should rather use $(document.body).on('click', 'a', function() {});instead of just $('a').on('click', function() {});to save a lot of time attaching event handlers to every element.
这不仅适用于parent > child元素。如果页面上的每个锚点都有一个单击处理程序，则应该使用$(document.body).on('click', 'a', function() {});而不是仅仅$('a').on('click', function() {});为了节省大量时间将事件处理程序附加到每个元素。
回答by gion_13
I think that you should have searched the jquery docsbefore posting this question :
我认为你应该在发布这个问题之前搜索过jquery 文档：
As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.
从 jQuery 1.7 开始， .on() 方法是将事件处理程序附加到文档的首选方法。
