jQuery的.bind()与.on()

Question

我找到了两篇关于新功能的精彩文章.on():jquery4u.com,elijahmanor.com.

有没有什么方法.bind()可以使用更好的.on()？

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

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

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

对于该样本,即使我不使用该功能提供的其他功能,也应该.on()使用它代替？.bind().on()

Answer 1

在内部,.bind直接映射到.on当前版本的jQuery.(同样适用.live.)因此,如果你使用的话,会有一个微小但实际上微不足道的性能影响.bind.

但是,.bind可以随时从将来的版本中删除.没有理由继续使用,.bind而且每个理由都更喜欢.on.

Answer 2

这些片段都表现完全相同:

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之间做出决定).

Answer 3

直接的方法,.delegate是优秀的API,.on并没有打算弃用它们.

直接方法更受欢迎,因为您的代码将不那么串联.错误输入事件名称而不是静默错误时,您将立即收到错误消息.在我看来,它也更容易读写click比on("click"

由于参数的顺序,.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不能执行非委托事件,并且有些事件没有直接方法,因此在极少数情况下可以使用它,但这只是因为您希望在委托事件和非委派事件之间进行清晰分离.

Answer 4

如果您查看源代码,$.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

Answer 5

从jQuery文档:

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

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