我找到了两篇关于新函数.on()的很棒的文章:jquery4u.com, elijahmanor.com。

是否有任何方法表明.bind()仍然比.on()更好?

例如,我有一个样例代码,看起来像这样:

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

你可以注意到,我只有一个项目检索的选择器和在我的情况下,<div>命名#容器已经存在时,我的页面被加载;没有动态添加。值得一提的是,我使用的是最新版本的jQuery: 1.7.2。

对于该示例,是否应该使用.on()而不是.bind(),即使我不使用.on()函数提供的其他功能?


在内部,.bind在当前版本的jQuery中直接映射到.on。(.live也是一样。)因此,如果您使用.bind来代替,则会有微小但实际上微不足道的性能损失。

然而,.bind可以在任何时候从未来的版本中删除。我们没有理由继续使用.bind,而更倾向于使用.on。


jQuery文档:

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

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


如果您在源代码中查找$.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美元


这些代码段都执行完全相同的任务:

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之间做出选择)。


direct方法和.delegate是比.on更好的api,我们无意弃用它们。

直接方法更可取,因为代码的字符串类型会更少。键入错误时,您将立即得到错误 事件名称,而不是无声的bug。在我看来,点击也比点击更容易写和读。

.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不能做非委托的事件 是没有直接方法的事件,所以在这种罕见的情况下,它可以被使用,但只是因为你想在委托和非委托事件之间做出清晰的区分。


在Jquery 3.0及以上版本,.bind已经被弃用,他们更喜欢使用.on。正如@Blazemonger早些时候回答的那样,它可能会被删除,而且肯定会被删除。对于旧版本,.bind也会在内部调用.on,它们之间没有区别。请参阅api了解更多细节。

jQuery API文档。bind()