我找到了两篇关于新函数.on()的很棒的文章:jquery4u.com, elijahmanor.com。
是否有任何方法表明.bind()仍然比.on()更好?
例如,我有一个样例代码,看起来像这样:
$("#container").click( function( e ) {} )
你可以注意到,我只有一个项目检索的选择器和在我的情况下,<div>命名#容器已经存在时,我的页面被加载;没有动态添加。值得一提的是,我使用的是最新版本的jQuery: 1.7.2。
对于该示例,是否应该使用.on()而不是.bind(),即使我不使用.on()函数提供的其他功能?
如果您在源代码中查找$.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不能做非委托的事件
是没有直接方法的事件,所以在这种罕见的情况下,它可以被使用,但只是因为你想在委托和非委托事件之间做出清晰的区分。