Javascript jQuery中的绑定事件是非常昂贵还是非常便宜?

Javascript jQuery中的绑定事件是非常昂贵还是非常便宜?,javascript,jquery,performance,events,Javascript,Jquery,Performance,Events,我刚刚编写了一个$().bind('event')函数,然后担心如果jQuery必须通过DOM中的每个元素来绑定此事件,那么这种调用可能会非常昂贵 或者,也许,这是一个非常有效的活动。我读过的jQuery文档没有明确说明这一点。有什么意见吗?基本上,你不会做得更好。 它所做的只是对每个选定元素调用attachEventListener() 仅在解析时间上,此方法可能比在每个元素上设置内联事件处理程序更快 一般来说,我认为这是一个非常便宜的操作。 < P>有两个事情可以使你的事件绑定代码慢:绑定和

我刚刚编写了一个$().bind('event')函数,然后担心如果jQuery必须通过DOM中的每个元素来绑定此事件,那么这种调用可能会非常昂贵


或者,也许,这是一个非常有效的活动。我读过的jQuery文档没有明确说明这一点。有什么意见吗?

基本上,你不会做得更好。 它所做的只是对每个选定元素调用attachEventListener()

仅在解析时间上,此方法可能比在每个元素上设置内联事件处理程序更快


一般来说,我认为这是一个非常便宜的操作。

< P>有两个事情可以使你的事件绑定代码慢:绑定和选择器的绑定。其中最关键的是绑定的#,但是选择器可能会影响初始性能

至于选择器,请确保不要使用纯类名选择器,如
.myclass
。如果您知道
myclass
的类始终位于
元素中,请将选择器设置为
div.myclass
,因为这将帮助jQuery更快地找到匹配的元素。另外,不要利用jQuery让您为它提供大量选择器字符串的优势。它可以用字符串选择器做的所有事情,也可以通过函数来做,这是有意为之的,因为这样做(不可否认的是)要快一些,因为jQuery不必坐在那里解析字符串来找出您想要的内容。因此,不要做
$('myforminput:eq(2)')
您可以执行
$('input','#myform')。eq(2)。通过指定上下文,我们也不会让jQuery看起来像它不需要的任何地方,这要快得多

至于绑定的数量:如果您有一个相对中等大小的元素数量,那么您应该很好——在现代浏览器中,任何多达200、300个可能的元素匹配都可以很好地执行。如果您有比这更多的内容,您可能希望转而研究事件委派

什么是活动授权?本质上,当您运行这样的代码时:

$('div.test').click(function() {
    doSomething($(this));
});
$(document).click(function(e) {
    var $target = $(e.target);
    if($target.is('div.test')) { // the element clicked on is a DIV
                                 // with a class of test
       doSomething($target);
    }
});
jQuery在幕后做了类似的事情(为每个匹配的元素绑定一个事件):

如果有大量的元素,这可能会变得效率低下。使用事件委派,您可以将绑定的数量减少到一个。但是怎么做呢?事件对象有一个
target
属性,让您知道事件作用于哪个元素。所以你可以这样做:

$('div.test').click(function() {
    doSomething($(this));
});
$(document).click(function(e) {
    var $target = $(e.target);
    if($target.is('div.test')) { // the element clicked on is a DIV
                                 // with a class of test
       doSomething($target);
    }
});
谢天谢地,您实际上不必使用jQuery编写上述代码。该函数被宣传为一种将事件绑定到尚不存在的元素的简单方法,它实际上能够通过使用事件委派并在操作发生时检查目标是否与指定的选择器匹配来完成此操作。当然,这有副作用,当速度很重要时,它非常方便

这个故事的寓意是什么?如果您担心脚本的绑定量,请将
.bind
替换为
.live
,并确保您有智能选择器


但是请注意,
.live
并不支持所有事件。如果你需要它不支持的东西,你可以查看这个插件,它是靠类固醇生存的。

应该注意的是,自从添加了
delegate
之后,您的脚本可能比使用
live
时更快。我发现。myClass比div快。myClass:@CharlieS:对于现代浏览器来说,这一直是事实,早在2009年,担心IE 7,8更为流行。div.test是一个更好的整体赌注。提醒您,.live()方法自v以来已被弃用。1.7和从1.9中删除