blocks|key|660737|text|.on()现在在一个统一的方法中提供了.live()、.delegate()和.bind()的组合。您可以通过如何使用.on()的参数来获得这三种方法中的任何一种的行为。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|660738|这些对在功能上是相同的：|660739|//+events+bound+directly+to+the+object+they+occur+on
$('.button').on('click',+fn);
$('.button').bind('click',+fn);

//+events+intercepted+after+bubbling+up+to+a+common+parent+object
$('.container').on("click",+'.button',+fn);
$('.container').delegate('.button',+"click",+fn);|code-block|syntax|javascript|660740|更多信息在jQuery+blog+entry中描述。|660741|在统一这些独立的函数之前，jQuery有多个不同的实现。现在，.on()是超集函数，而.bind()、.live()和.delegate()在它们的实现中都只是调用.on()，所以现在只有一个实际事件处理的实现。因此，从这个角度来看，这也是一个代码清理和流线化问题。类似地，.die()、.undelegate()和.unbind()现在只是调用.off()，而不是有单独的实现。|660742|注意:所有版本的jQuery都不推荐使用.live()，因为它只是拦截document对象上的所有冒泡事件的特例，因此可以很容易地用.delegate()或.on()替换它，并且当大量事件都在document对象上处理时，在每个事件上检查大量选择器可能会成为性能问题。将这样的委托事件挂接到离事件发生地点更近的公共父对象上要比将它们都放在document对象上更有效(因此.live()不适合使用)。|660743|从jQuery+1.7源代码中，您可以看到所有这些函数是如何调用.on()和.off()的|660744|bind:+function(+types,+data,+fn+)+{
++++return+this.on(+types,+null,+data,+fn+);
},
unbind:+function(+types,+fn+)+{
++++return+this.off(+types,+null,+fn+);
},

live:+function(+types,+data,+fn+)+{
++++jQuery(+this.context+).on(+types,+this.selector,+data,+fn+);
++++return+this;
},
die:+function(+types,+fn+)+{
++++jQuery(+this.context+).off(+types,+this.selector+%7C%7C+"**",+fn+);
++++return+this;
},

delegate:+function(+selector,+types,+data,+fn+)+{
++++return+this.on(+types,+selector,+data,+fn+);
},
undelegate:+function(+selector,+types,+fn+)+{
++++//+(+namespace+)+or+(+selector,+types+[,+fn]+)
++++return+arguments.length+==+1?+this.off(+selector,+"**"+)+:+this.off(+types,+selector,+fn+);
},|660745|entityMap|0|LINK|mutability|MUTABLE|url|http://blog.jquery.com/2011/11/03/jquery-1-7-released/^0|0|5|J|7|R|B|13|7|1N|5|0|0|0|5|H|0|0|V|5|17|7|1F|7|1N|B|2A|5|3T|6|40|D|4E|9|4T|6|0|K|7|1U|B|26|5|56|7|0|W|5|12|6|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]|$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1F|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1G|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1H|8|@]|D|@$9|1I|A|1J|1|1K]]|E|$]]|$1|O|3|P|5|6|7|1L|8|@$9|1M|A|1N|B|C]|$9|1O|A|1P|B|C]|$9|1Q|A|1R|B|C]|$9|1S|A|1T|B|C]|$9|1U|A|1V|B|C]|$9|1W|A|1X|B|C]|$9|1Y|A|1Z|B|C]|$9|20|A|21|B|C]|$9|22|A|23|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|24|8|@$9|25|A|26|B|C]|$9|27|A|28|B|C]|$9|29|A|2A|B|C]|$9|2B|A|2C|B|C]]|D|@]|E|$]]|$1|S|3|T|5|6|7|2D|8|@$9|2E|A|2F|B|C]|$9|2G|A|2H|B|C]]|D|@]|E|$]]|$1|U|3|V|5|J|7|2I|8|@]|D|@]|E|$K|L]]|$1|W|3|-4|5|6|7|2J|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|13]]]]

<code>.on()</code> now offers a combination of <code>.live()</code>, <code>.delegate()</code> and <code>.bind()</code> all in one unified method. You can get the behavior of any of those three just by how you use the arguments to <code>.on()</code>.

These pairs are functionally the same:

<pre><code>// events bound directly to the object they occur on
$('.button').on('click', fn);
$('.button').bind('click', fn);

// events intercepted after bubbling up to a common parent object
$('.container').on("click", '.button', fn);
$('.container').delegate('.button', "click", fn);
</code></pre>

More info is described in a <a href="http://blog.jquery.com/2011/11/03/jquery-1-7-released/" rel="noreferrer">jQuery blog entry</a>.

Before unifying these separate functions, jQuery had multiple different implementations. Now, <code>.on()</code> is the superset function and <code>.bind()</code>, <code>.live()</code> and <code>.delegate()</code> all just call <code>.on()</code> in their implementation so there is now only one implementation of the actual event handling. So, from that standpoint, it was also a code cleanup and streamlining issue. Similarly, <code>.die()</code>, <code>.undelegate()</code> and <code>.unbind()</code> just call <code>.off()</code> now rather than have separate implementations.

Note: <code>.live()</code> has been deprecated for all versions of jQuery because it's just a special case of intercepting all the bubbled events on the document object so it can be easily replaced with either <code>.delegate()</code> or <code>.on()</code> and when lots of events were all being handled on the document object, it could become a performance problem checking lots of selectors on every event. It's much more efficient to hook a delegated event like this to a common parent that is much closer to where the event occurs than put them all on the document object (thus why <code>.live()</code> is not good to use).

From the jQuery 1.7 source, you can see how all these functions just now call <code>.on()</code> and <code>.off()</code>:

<pre><code>bind: function( types, data, fn ) {
 return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
 return this.off( types, null, fn );
},

live: function( types, data, fn ) {
 jQuery( this.context ).on( types, this.selector, data, fn );
 return this;
},
die: function( types, fn ) {
 jQuery( this.context ).off( types, this.selector || "**", fn );
 return this;
},

delegate: function( selector, types, data, fn ) {
 return this.on( types, selector, data, fn );
},
undelegate: function( selector, types, fn ) {
 // ( namespace ) or ( selector, types [, fn] )
 return arguments.length == 1? this.off( selector, "**" ) : this.off( types, selector, fn );
},
</code></pre>

blocks|key|660819|text|旧的方法有点混乱--+live()，delegate()和bind()之间的区别并不清楚。通过使on()成为处理附加任何事件的函数，而不管它是否存在，它只是更容易使用。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|660820|在此之前，live()比新的on()函数慢得多，因此您必须在bind()和live()之间做出选择。|660821|entityMap^0|B|6|I|A|T|6|1C|4|0|5|6|E|4|U|6|11|6|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|I|$]]

The old method was a bit messy - the difference between <code>live()</code>, <code>delegate()</code> and <code>bind()</code> was not clear. By making <code>on()</code> the function that handles attaching any event, regardless of whether it exists or not, it's just easier to work with.

Before now, <code>live()</code> was a lot slower than the new <code>on()</code> function, hence why you had to choose between <code>bind()</code> and <code>live()</code>.

blocks|key|660899|text|主要的区别是，.bind要求元素(选择器)在附加时存在，而.on没有这个要求，坦率地说，在我看来，.on有更好/更优雅的语法。请参阅文档第一段http://api.jquery.com/bind/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|660900|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/bind/^0|1Z|R|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

The MAIN difference is that .bind requires the element (selector) exist AT THE TIME it gets attached, whereas .on does not have that requirement, and .on frankly has better/more elegant syntax in my opinion. See the documentation first paragraph <a href="http://api.jquery.com/bind/" rel="nofollow">http://api.jquery.com/bind/</a>

And why is .on() now preferred in jQuery 1.7?

What's the difference between jQuery.bind() and jQuery.on()?

jQuery

为什么在jQuery 1.7中.on()现在是首选的？

问jQuery.bind()和jQuery.on()有什么区别？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery.bind()和jQuery.on()有什么区别？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery.bind()和jQuery.on()有什么区别？
EN