Question

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

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

与live和bind有什么区别？

Answer 1

on()试图将大多数jQuery的事件绑定函数合并为一个。这有助于整理live vs 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。

Answer 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”将是this函数中通常的“click”。现在on的好处是“this”始终是事件目标，而不是它所附加的容器。

Answer 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 ) = 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

jQuery（this.context）？在大多数情况下document === {{1}}

Answer 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）...

所以在实践中，你可以：

使用on之类的bind：

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

使用像on这样的delegate（根据给定元素的事件委托）：

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

使用on之类live（根据文档中的事件委托）：

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

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

Answer 6

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

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

.on（）也可以进行事件委托，是首选。

.bind（）实际上只是.on（）的别名。这是1.7.1

中绑定函数的定义

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

添加.on（）的想法是创建统一的事件API，而不是具有绑定事件的多个函数; .on（）替换.bind（）,. live（）和.delegate（）。

Answer 7

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

例如，如果您使用：

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

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

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

但是如果你使用：

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

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

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

（在最后一种情况下，相关的事件对象将有selector =“。mySelector”）

`on`和`live`或`bind`之间有什么区别？

7 个答案: