‘ on’和‘ live’或‘ bind’有什么区别？

在 jQuery V1.7中添加了一个新方法 on:

那个。On ()方法将事件处理程序附加到 jQuery 对象中当前选定的元素集。在 jQuery 1.7中,。方法提供附加事件处理程序所需的所有功能。’

live和 bind有什么不同？

62054 次浏览
小开

(在你改变问题之前，我的开场白更有意义。原来你说的是“ live有什么不同?”)

on更像 delegate而不是 live，它基本上是 bind和 delegate的统一形式(事实上，研究小组说它的目的是 “ ... 统一将事件附加到文档的所有方法...” )。

live基本上是作为一个整体附加到文档的 on(或 delegate)。它是 在1.7版时已废弃，支持使用 on或 delegate。展望未来，我怀疑我们将看到仅使用 on的代码，而不是使用 bind或 delegate(或 live) ..。

所以实际上，你可以:

  1. 像使用 bind一样使用 on:

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

  2. Use on like delegate (event delegation rooted in a given element):

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

  3. Use on like live (event delegation rooted in the document):

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

使用 .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

小开
最佳答案

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 将 所有这些方法 还有简写的事件处理程序设置器映射到 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。

小开

现在是... 的捷径

//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/

小开

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...) ，这可以快速累加

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

小开

没有一个用于基本用例的。 这两条线在功能上是相同的

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

. on ()也可以进行事件委托，并且是首选的。

现在. bind ()实际上只是. on ()的别名

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

关于加法的想法。On ()是为了创建一个统一的事件 API，而不是为绑定事件创建多个函数;。()更换。绑定() ，。现场直播。委托()。

小开

如果您想要获得与元素相关联的事件处理程序，那么您应该注意一些事情——请注意处理程序附加到了哪个元素！

例如，如果您使用:

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

您将使用以下方法获得事件处理程序:

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

但如果你使用:

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

您将使用以下方法获得事件处理程序:

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

(在最后一种情况下，相关的事件对象将具有 selector = “ . mySelector”)


提交答案