216

我发现了两篇关于新功能的精彩文章.on()jquery4u.comelijahmanor.com

有什么方法.bind()比 still 更好用.on()吗?

例如,我有一个示例代码,如下所示:

$("#container").click( function( e ) {} )

您可以注意到,选择器只检索了一个项目,在我的情况下,当我的页面加载时,该<div>名称#container已经存在;不是动态添加的。值得一提的是,我使用的是最新版本的 jQuery:1.7.2。

对于该示例,即使我不使用该功能提供的其他功能,也应该.on()使用它来代替?.bind().on()

4

6 回答 6

326

在内部,.bind直接映射到.on当前版本的 jQuery。(对于.live. 也是如此。)因此,如果您使用它,性能会受到很小但实际上微不足道的影响.bind

但是,.bind可能会随时从未来版本中删除。没有理由继续使用.bind,也没有理由更喜欢.on

于 2012-08-07T13:26:35.457 回答
59

这些片段都执行完全相同的事情:

element.on('click', function () { ... });
element.bind('click', function () { ... });
element.click(function () { ... });

但是,它们与这些非常不同,它们都执行相同的操作:

element.on('click', 'selector', function () { ... });
element.delegate('click', 'selector', function () { ... });
$('selector').live('click', function () { ... });

第二组事件处理程序使用事件委托,并且适用于动态添加的元素。使用委托的事件处理程序也具有更高的性能。第一组不适用于动态添加的元素,并且性能更差。

jQuery 的on()函数没有引入任何不存在的新功能,它只是尝试标准化 jQuery 中的事件处理(您不再需要在 live、bind 或 delegate 之间做出决定)。

于 2012-08-07T13:29:46.773 回答
11

直接方法 和.delegate是优于它们的 API,.on并且无意弃用它们。

直接方法更可取,因为您的代码的字符串类型较少。当您输入错误的事件名称而不是静默错误时,您将立即收到错误。click在我看来,它也比写和读更容易on("click"

由于参数的顺序,The.delegate优于:.on

$(elem).delegate( ".selector", {
    click: function() {
    },
    mousemove: function() {
    },
    mouseup: function() {
    },
    mousedown: function() {
    }
});

你马上就知道它是委托的,因为它说的是委托。您还可以立即看到选择器。

现在.on还不清楚它是否已被委派,您必须查看选择器的末尾:

$(elem).on({
    click: function() {
    },
    mousemove: function() {
    },
    mouseup: function() {
    },
    mousedown: function() {
    }
}, "selector" );

现在,这个名字.bind真的很糟糕,表面上比.on。但是.delegate不能执行非委托事件,并且有些事件没有直接方法,因此在这种罕见的情况下可以使用它,但这只是因为您想在委托事件和非委托事件之间进行清晰的分离。

于 2012-08-07T13:42:59.140 回答
8

如果您查看源代码,$.fn.bind您会发现它只是一个重写函数on

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

http://james.padolsey.com/jquery/#v=1.7.2&fn=$.fn.bind

于 2012-08-07T13:28:37.713 回答
6

来自 jQuery 文档:

从 jQuery 1.7 开始,.on() 方法是将事件处理程序附加到文档的首选方法。对于早期版本,.bind() 方法用于将事件处理程序直接附加到元素。处理程序附加到 jQuery 对象中当前选定的元素,因此这些元素必须存在于调用 .bind() 的位置。有关更灵活的事件绑定,请参阅 .on() 或 .delegate() 中有关事件委托的讨论。

http://api.jquery.com/bind/

于 2012-08-07T13:27:19.960 回答
4

从 Jquery 3.0 及更高版本开始, .bind 已被弃用,他们更喜欢使用 .on 。正如@Blazemonger 之前回答的那样,它可能会被删除,并且肯定会被删除。对于旧版本 .bind 也会在内部调用 .on ,它们之间没有区别。另请参阅 api 以获取更多详细信息。

.bind() 的 jQuery API 文档

于 2016-12-01T21:18:23.073 回答