Question

程序员为什么说“现场”效率低下？

那么替代方案是什么复制该功能的方法哪个更有效率？
我们如何衡量减慢速度的影响？

Answer 1

我认为这是低效的，因为处理程序放在根节点上，并依赖冒泡来捕获事件并运行正确的处理程序。

另一种选择是在动态创建的元素创建并添加到DOM时简单bind处理程序。

另一种方法是将单个处理程序绑定到容器，并让您的事件冒泡到那个。如果您将大量相同的元素添加到容器中，这可能会很好。

<div id="myContainer">
    <div class="myElement>element</div>
    <div class="myElement>element</div>
    <div class="myElement>element</div>
    <div class="myElement>element</div>
</div>

将点击处理程序绑定到#myContainer而不是每个.myElement。

$('#myContainer').click(function(e) {
    $target = $(e.target);
    if($target.closest('.myElement').length) {
        // Run my code for the click
    }
});

我认为这可能会遇到与.live()相同的低效率，但应该更好，因为它更加本地化。添加了新的.myElement项，自动生效。

修改

根据the docs：从jQuery 1.4开始，事件冒泡可以选择停在DOM元素“context”上。

这似乎会产生与我提到的最后一种方法类似的效果。

修改

根据Nick Craver的建议，jQuery的.delegate()方法可以更干净地产生类似的效果。

示例由Nick提供：

$('#myContainer').delegate('.myElement', 'click' function() { alert($(this).text()); });

Answer 2

如果出现以下情况，

live()可能只会被视为低效：

有一小部分要绑定到某个事件（＆lt; 5，比方说）。
这些目标元素的数量保持不变。

如果您的用例符合上述标准（尤其是＃2），您应该坚持直接绑定元素并避免使用live()。

您可以尝试对live()的性能进行基准测试的示例是通过分析使用live()将click处理程序绑定到元素的代码片段，并分析另一个片段使用click()绑定到同一元素的代码。

我不太确定你会得到什么样的最终结果，但我相信它会很有趣。

Answer 3

正如@patrick建议的那样，它可能效率低下，因为它需要处理文档中的所有事件，无论气泡是否到达您的元素。

这是delegate可以提供帮助的地方，因为它的工作方式与实时相同，但允许它仅通过将文档限制为公共父级来实现较小比例的文档

（使用他的例子）

$('#myContainer').delegate('div.myElement', 'click', function(){});

jQuery - 为什么“活”效率低下？我们如何衡量呢？

3 个答案: