Javascript 什么'；jQuery.bind（）和jQuery.on（）之间的区别是什么？

为什么在jQuery 1.7中现在首选.on（）？

。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有多个不同的实现。现在，

.on（）

是超集函数，

.bind（）

、

.live（）

和

.delegate（）

在它们的实现中都只调用

.on（）

，所以现在只有一个实际事件处理的实现。因此，从这个角度来看，这也是一个代码清理和优化问题。类似地，

.die（）

、

.undelegate（）

和

.unbind（）

现在只需调用

.off（）

，而不是单独实现

注意：

.live（）

已被所有版本的jQuery弃用，因为它只是截取文档对象上所有冒泡事件的特例，因此可以轻松地替换为

.delegate（）

或

.on（）

并且在文档对象上处理大量事件时，检查每个事件上的大量选择器可能会导致性能问题。将这样的委托事件挂接到离事件发生位置更近的公共父级比将它们全部放在文档对象上要高效得多（因此，

.live（）

不适合使用）

从jQuery 1.7源代码中，您可以看到所有这些函数刚才是如何调用

.on（）

和

.off（）

：

---

旧方法有点混乱-不清楚

live（）

、

delegate（）

和

bind（）

之间的区别。通过使

on（）

成为处理附加任何事件的函数，无论事件是否存在，都会更容易处理

---

在此之前，

live（）

比新的

on（）

函数慢得多，因此您必须在

bind（）

和

live（）

之间进行选择。主要区别在于。bind要求元素（选择器）在连接时存在，而.on没有该要求，在我看来，.on坦白地说有更好/更优雅的语法。参见文档第一段

是jQuery团队在其中描述

.on（）

和

.off（）

的博客条目。其摘要是：“新的.on（）和.off（）API统一了在jQuery中将事件附加到文档的所有方式，并且它们的类型更短！”在使用

$（选择器）时。on（'click'，fn）

，选择器在连接时必须仍然存在。在此版本中，

$（parentselector）。在（'click'，selector，fn）

上，

parentselector在连接时必须存在，但另一个
选择器不必存在。理解必须存在的内容以及以后可以创建的内容非常重要。是的，感谢您的澄清，并且始终是，`$（文档）。on（`在您的示例中作为您的“parentselector”提供。是的，但是对许多事件使用
$（文档）。on（）
会导致性能问题。这就是为什么
.live（）
已被弃用，因为它就是这样做的。最好选择一个更接近实际事件的父选择器，而不是用于许多其他类型事件的选择器。@jfriend00-true，但我不打算在这里完整记录.bind（）.on（）和.live（），而只是指出.bind（）之间的主要区别和.on（）给定正确的参数来模拟
live
的功能，我认为
on
同样慢。我个人还没有分析过它，所以不能说，但是根据jQuery帖子，它比
live（）快得多
implementation。当然，他们会这么说，但这可能是真的。哦，好吧，我想我有点误解了你。他们说他们改进了事件委派。
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 );
},