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

Question

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

1. 那么复制那个更有效的函数的替代方法是什么？
2. 我们如何衡量减慢速度的影响？

Answer 1

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

一种替代方法是在bind创建元素并将其添加到DOM时简单地处理动态创建的元素.

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

<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添加新项目,自动工作.

编辑:

根据文档:从jQuery 1.4开始,事件冒泡可以选择在DOM元素"context"停止.

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

编辑:

正如Nick Craver所建议的那样,jQuery的.delegate()方法可以更清晰地产生类似的效果.

示例由Nick提供:

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