`on` 和 `live` 或 `bind` 有什么区别？答案

【问题标题】：What's the difference between `on` and `live` or `bind`?`on` 和 `live` 或 `bind` 有什么区别？
【发布时间】：2011-11-09 12:52:40
【问题描述】：

在 jQuery v1.7 中添加了一个新方法，on。来自文档：

‘.on() 方法将事件处理程序附加到 jQuery 对象中当前选定的元素集。从 jQuery 1.7 开始，.on() 方法提供了附加事件处理程序所需的所有功能。'

live 和 bind 有什么区别？

【问题讨论】：

相关：What's the difference between jQuery .live() and .on()
在询问之前寻找过类似的东西但没有成功。谢谢！

标签： jquery

【解决方案1】：

on() 是一种将 jQuery 的大多数事件绑定函数合并为一个的尝试。这还有一个额外的好处，那就是用live 和delegate 来清理效率低下的地方。在未来的 jQuery 版本中，这些方法将被移除，只剩下 on 和 one。

例子：

// Using live()
$(".mySelector").live("click", fn);

// Equivalent `on` (there isn't an exact equivalent, but with good reason)
$(document).on("click", ".mySelector", fn);

// Using bind()
$(".mySelector").bind("click", fn);

// Equivalent `on`
$(".mySelector").on("click", fn);

// Using delegate()
$(document.body).delegate(".mySelector", "click", fn);

// Equivalent `on`
$(document.body).on("click", ".mySelector", fn);

在内部，jQuery 将 all 这些方法和速记事件处理程序设置器映射到 on() 方法，进一步表明您应该从现在开始忽略这些方法，只使用on：

bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
},
live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
},
delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
},

见https://github.com/jquery/jquery/blob/1.7/src/event.js#L965。

【讨论】：

正如@JamWaffles 所说的最容易理解的答案。您能否添加 on 和 delegate 之间的比较以完成答案？谢谢！
大声笑，你在我之前 4 秒添加了 jquery 源：D 顺便说一句，现场等效上下文是文档，而不是 document.body
您可能希望参考 1.7 标签，否则将来的更改可能会使您的链接无效（未指向正确的位置）：github.com/jquery/jquery/blob/1.7/src/event.js#L965
$(document.body).delegate("click", ".mySelector", fn); 应该是$(document.body).delegate(".mySelector", "click", fn);
@dsdsdsdsd, off 作为 unbind、unlive 和 undelegate 的通用替代品。

【解决方案2】：

on 在本质上与delegate 非常接近。那么为什么不使用委托呢？这是因为on 不是一个人来的。有off，用于取消绑定事件，one 用于创建仅执行一次的事件。这是一个新事件的“包”。

live 的主要问题是它附加到“窗口”，迫使页面结构（dom）深处的元素上的点击事件（或其他事件）“冒泡”到顶部页面找到愿意处理它的事件处理程序。在每个级别，都必须检查所有事件处理程序，如果您进行深度覆盖，这可以快速加起来 (<body><div><div><div><div><table><table><tbody><tr><td><div><div><div><ul><li><button> etc etc etc...)

所以，bind 和 click 一样，就像其他快捷方式事件绑定器一样直接附加到事件目标。如果您有一个表格，比如说，1000 行和 100 列，并且 100'000 个单元格中的每一个都包含一个您想要处理的单击复选框。附加 100'000 个事件处理程序将花费大量页面加载时间。在表级别创建单个事件并使用事件委托的效率要高几个数量级。事件目标将在事件执行时检索。 “this”将是表格，但“event.target”将是您在 click 函数中常用的“this”。现在on 的好处是“this”将始终是事件目标，而不是它所附加的容器。

【讨论】：

委托不带取消委托吗？
是的。很好的发现。你每天都在学习；）（自 2011 年以来，文档有了很大的改进）

【解决方案3】：

使用.on 方法，可以使用相同的功能执行.live、.delegate 和.bind，但使用.live() 只能使用.live()（将事件委托给文档）。

jQuery("#example").bind( "click", fn ) = jQuery( "#example").on( "click", fn );

jQuery("#example").delegate( ".examples", "click", fn ) = jQuery( "#example" ).on( "click", ".examples", fn )

jQuery("#example").live( fn ) = jQuery( document ).on( "click", "#example", fn )

我可以直接从 jQuery 源确认这一点：

bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
},

live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
},

delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
},

jQuery(this.context)？ this.context === document 在大多数情况下

【讨论】：

【解决方案4】：

（在你改变问题之前，我的开场白更有意义。最初你会说“与live有什么区别？”）

on更像delegate而不像live，基本上是bind和delegate的统一形式（其实团队说它的目的是"...to unify all the ways of attaching events to a document..."）。

live 基本上是on（或delegate）附加到整个文档中。 deprecated as of v1.7 赞成使用 on 或 delegate。展望未来，我怀疑我们将看到仅使用on 的代码，而不是使用bind 或delegate（或live）...

所以在实践中，您可以：

像bind一样使用on：

/* Old: */ $(".foo").bind("click", handler);
/* New: */ $(".foo").on("click", handler);

像delegate 一样使用on（植根于给定元素的事件委托）：

/* Old: */ $("#container").delegate(".foo", "click", handler);
/* New: */ $("#container").on("click", ".foo", handler);

像live一样使用on（事件委托植根于文档）：

/* Old: */ $(".foo").live("click", handler);
/* New: */ $(document).on("click", ".foo", handler);

【讨论】：

在我链接的页面中说“如果将新 HTML 注入页面，请在将新 HTML 放入页面后选择元素并附加事件处理程序。或者，使用委托事件附加事件处理程序，如下所述。”。所以on更有可能是bind，而不是live。我说的对吗？
@Diego: on 是bind 和delegate 的组合，正如我所说，不太像live。您可以使用on，如bind（将处理程序直接附加到元素），或者您可以使用on，如delegate（将处理程序附加到元素，但仅在实际单击的元素匹配时触发事件一个选择器，就好像该元素是事件发生的那个元素——例如，事件委托），或者你可以像live一样使用它（delegate使用文档作为根） .如果您要动态添加元素，则事件委托非常有用。
旧的 live 也可以像委托一样使用：$("#id", ".class").live(fn) = $(".class").delegate("#id", fn ); 实际上在旧的 jQuery 源代码中，他们使用 live 作为一般情况，将委托作为特殊情况，这使得这更加当你想到它时会感到困惑。
@Esailija：够公平的。我不认为这是它众所周知的用途，因为他们很快就添加了delegate，但仍然如此。 :-)

【解决方案5】：

live 现在是 .on() 的快捷方式

//from source http://code.jquery.com/jquery-1.7.js
live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
}

这篇文章也可能对你有用 http://blog.jquery.com/2011/11/03/jquery-1-7-released/

【讨论】：

【解决方案6】：

基本用例没有一个。这两行在功能上是一样的

$( '#element' ).bind( 'click', handler );
$( '#element' ).on( 'click', handler );

.on() 也可以做事件委托，是首选。

.bind() 现在实际上只是 .on() 的别名。这是1.7.1中bind函数的定义

bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
},

添加 .on() 的想法是创建一个统一的事件 API，而不是拥有多个函数来绑定事件； .on() 替换 .bind()、.live() 和 .delegate()。

【讨论】：

【解决方案7】：

如果您想获取与元素关联的事件处理程序，您应该注意的事项 - 注意处理程序附加到哪个元素！

例如，如果您使用：

$('.mySelector').bind('click', fn);

您将使用以下方式获取事件处理程序：

$('.mySelector').data('events');

但如果你使用：

$('body').on('click', '.mySelector', fn);

您将使用以下方式获取事件处理程序：

$('body').data('events');

（在最后一种情况下，相关事件对象将具有 selector=".mySelector"）

【讨论】：

events 无论如何都没有记录，我认为它不再适用于 1.9
对。在较新的版本中，可以使用 _data 代替数据。答案是关于“事件所有者”的差异，而不是旧版本或新版本的确切语法。还有其他关于不同 JQuery 版本的确切语法的帖子。例如stackoverflow.com/questions/2518421/…