jQuery的.bind()与.on()

2020/10/15 15:41 · javascript ·  · 0评论

我找到了两篇有关此新功能的精彩文章.on()jquery4u.comelijahmanor.com

有什么方法.bind()比它还好用.on()吗?

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

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

您可能会注意到,选择器只检索了一项,在我的情况下,加载页面时<div>名称#container已经存在;没有动态添加。重要的是要提到我使用的是最新版本的jQuery:1.7.2。

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

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

但是,.bind可以随时从将来的版本中删除它。没有理由继续使用.bind.on而是有理由改为偏爱

这些片段执行的功能完全相同:

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中的事件处理(您不再需要在实时,绑定或委托之间做出决定)。

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

直接方法是可取的,因为您的代码将更少地键入字符串。错误输入事件名称而不是静默错误会立即导致错误。在我看来,它的读写clickon("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不能执行未委托事件,并且有些事件没有直接方法,因此在这种罕见的情况下可以使用它,但这仅是因为您希望在委托事件和未委托事件之间进行清晰的区分。

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

从jQuery文档中:

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

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

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

.bind()的jQuery API文档

本文地址:http://javascript.askforanswer.com/jqueryde-bindyu-on.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!