jQuery .delegate() 与 .on()
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/8359085/
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
.delegate() vs .on()
提问by Galled
I'm using jQuery in my web application. I've been using .bind()
but I see that it is a little slow, so while reading the documentation I read about .on()
and .delegate()
. I understand how .delegate()
works but I'm not clear on what is the difference between it and .on()
or which is better in which scenarios.
我在我的 Web 应用程序中使用 jQuery。我一直在使用,.bind()
但我发现它有点慢,所以在阅读文档时我阅读了.on()
和.delegate()
。我了解.delegate()
工作原理,但我不清楚它之间有什么区别,.on()
或者在哪些情况下更好。
Also I'm using jQuery 1.6 so I would like to know if it is worth it to prepare my script for jQuery 1.7 by putting in a condition similar to the following:
此外,我正在使用 jQuery 1.6,所以我想知道是否值得通过放入类似于以下的条件来为 jQuery 1.7 准备我的脚本:
if(typeof $(selector).on == 'function'){
/* use .on() */
}else{
/* use .delegate() */
}
Is this a good idea (to prepare for .on()
) or is it just looking for trouble for nothing?
这是一个好主意(准备.on()
)还是只是白白找麻烦?
Please help me to get clear understanding of these methods.
请帮助我清楚地了解这些方法。
回答by lalibi
The .on()
syntax is the new syntax that version 1.7 uses and it is meant to substitute .bind()
, .delegate()
and .live()
.
该.on()
语法是 1.7 版使用的新语法,它旨在替代 .bind()
,.delegate()
和.live()
。
More here -> http://blog.jquery.com/2011/11/03/jquery-1-7-released/
更多在这里-> http://blog.jquery.com/2011/11/03/jquery-1-7-released/
New Event APIs: .on() and .off()
The new .on() and .off() APIs unify all the ways of attaching events to a document in jQuery — and they're shorter to type!
新事件 API:.on() 和 .off()
新的 .on() 和 .off() API 统一了在 jQuery 中将事件附加到文档的所有方式——而且它们的输入更短!
$(elements).on( events [, selector] [, data] , handler );
$(elements).off( [ events ] [, selector] [, handler] );
When a selector is provided, .on() is similar to .delegate() in that it attaches a delegated event handler, filtered by the selector. When the selector is omitted or null the call is like .bind(). There is one ambiguous case: If the data argument is a string, you must provide either a selector string or null so that the data isn't mistaken as a selector. Pass an object for data and you'll never have to worry about special cases.
All the existing event binding methods (and their corresponding unbinding methods) are still there in 1.7, but we recommend that you use .on() for any new jQuery project where you know version 1.7 or higher is in use.(emphasis mine)
当提供选择器时, .on() 类似于 .delegate() ,因为它附加了一个委托事件处理程序,由选择器过滤。当省略选择器或呼叫时,呼叫就像.bind()。有一种模棱两可的情况:如果数据参数是字符串,则必须提供选择器字符串或空值,以免数据被误认为是选择器。传递数据对象,您永远不必担心特殊情况。
所有现有的事件绑定方法(及其相应的解除绑定方法)在 1.7 中仍然存在,但我们建议您将 .on() 用于任何您知道正在使用 1.7 或更高版本的新 jQuery 项目。(强调我的)
回答by zzzzBov
I recently answered a related questionabout this very topic.
The important part is:
重要的部分是:
The new
on
docsfunction is used to replace the existing separate methods of binding events:The existing events continue to exist, and are simply aliases of on. There is no official report to suggest that they will be removed, so you'd be safe to continue to use them if you understand them better.
新的
on
docs函数用于替换现有的单独的绑定事件方法:现有事件继续存在,只是 on 的别名。没有官方报告表明它们将被删除,因此如果您更好地理解它们,则可以安全地继续使用它们。
Delegate:
代表:
$(selector).delegate(subselector, events, data, handler);
$(selector).on(events, subselector, data, handler);
Source:
来源:
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
}
tl;dr
tl;博士
If you want backwards compatibility, just keep using .delegate()
docs, if your code relies on newer jQuery features, feel free to use on
.
如果您想要向后兼容,请继续使用.delegate()
docs,如果您的代码依赖于较新的 jQuery 功能,请随意使用on
.
回答by Viruzzo
From the API:
从API:
"As of jQuery 1.7, .delegate() has been superseded by the .on() method."
“从 jQuery 1.7 开始,.delegate() 已被 .on() 方法取代。”
"As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers."
“从 jQuery 1.7 开始,.on() 方法提供了附加事件处理程序所需的所有功能。”
回答by P?l Thingb?
Consider using find() instead of event delegates. Look at this performance test: http://jsperf.com/jquery-event-delegation/85
考虑使用 find() 而不是事件委托。看看这个性能测试:http: //jsperf.com/jquery-event-delegation/85
Instead of
代替
$("#mydomid").on("click", ".somechildclass", delegate);
use
用
$("#mydomid").find(".somechildclass").on("click", delegate);
回答by Jakub Vrána
.delegate()
is equivalent to .on()
: https://github.com/jquery/jquery/blob/bd9a138/src/event/alias.js#L31-33
.delegate()
相当于.on()
:https: //github.com/jquery/jquery/blob/bd9a138/src/event/alias.js#L31-33
.on()
is preferred because it is shorter and it has a better parameters order.
.on()
是首选,因为它更短并且具有更好的参数顺序。
回答by Techie
if you go through the jQuery Api you will find that both the same. Read More
如果您浏览 jQuery Api,您会发现两者相同。阅读更多
For example, the following .delegate() code:
$("table").delegate("td", "click", function() {
$(this).toggleClass("chosen"); });is equivalent to the following code written using .on():
$("table").on("click", "td", function() {
$(this).toggleClass("chosen"); });
例如,以下 .delegate() 代码:
$("table").delegate("td", "click", function() {
$(this).toggleClass("chosen"); });等价于以下使用 .on() 编写的代码:
$("table").on("click", "td", function() {
$(this).toggleClass("chosen"); });