为什么在jQuery 1.7中.on()现在是首选的?
发布于 2012-02-02 22:16:07
.on()
现在在一个统一的方法中提供了.live()
、.delegate()
和.bind()
的组合。您可以通过如何使用.on()
的参数来获得这三种方法中的任何一种的行为。
这些对在功能上是相同的:
// 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);
更多信息在jQuery blog entry中描述。
在统一这些独立的函数之前,jQuery有多个不同的实现。现在,.on()
是超集函数,而.bind()
、.live()
和.delegate()
在它们的实现中都只是调用.on()
,所以现在只有一个实际事件处理的实现。因此,从这个角度来看,这也是一个代码清理和流线化问题。类似地,.die()
、.undelegate()
和.unbind()
现在只是调用.off()
,而不是有单独的实现。
注意:所有版本的jQuery都不推荐使用.live()
,因为它只是拦截document对象上的所有冒泡事件的特例,因此可以很容易地用.delegate()
或.on()
替换它,并且当大量事件都在document对象上处理时,在每个事件上检查大量选择器可能会成为性能问题。将这样的委托事件挂接到离事件发生地点更近的公共父对象上要比将它们都放在document对象上更有效(因此.live()
不适合使用)。
从jQuery 1.7源代码中,您可以看到所有这些函数是如何调用.on()
和.off()
的
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 );
},
发布于 2012-02-02 22:22:31
主要的区别是,.bind要求元素(选择器)在附加时存在,而.on没有这个要求,坦率地说,在我看来,.on有更好/更优雅的语法。请参阅文档第一段http://api.jquery.com/bind/
发布于 2012-02-02 22:16:39
旧的方法有点混乱-- live()
,delegate()
和bind()
之间的区别并不清楚。通过使on()
成为处理附加任何事件的函数,而不管它是否存在,它只是更容易使用。
在此之前,live()
比新的on()
函数慢得多,因此您必须在bind()
和live()
之间做出选择。
https://stackoverflow.com/questions/9113783
复制相似问题