绑定父元素与元素直接相比有优缺点吗？

Question

绑定父元素与元素直接相比有优缺点吗？

nai*_*per 5 javascript performance jquery

为了更好地理解jQuery性能,我遇到了以下问题.考虑将click事件绑定到列表中的项目的两个大致相同的解决方案:

清单项目:

<div id="items">
    <div class="item"><a href="#">One</a></div>
    <div class="item"><a href="#">Two</a></div>
    <div class="item"><a href="#">Three</a></div>
</div>

<div id="items2">
    <div class="item"><a href="#">One</a></div>
    <div class="item"><a href="#">Two</a></div>
    <div class="item"><a href="#">Three</a></div>
</div>

Run Code Online (Sandbox Code Playgroud)

请注意,有两个完整列表(除了ID).现在,考虑以下jQuery来绑定items中每个锚点的客户端事件:

$('#items').on('click', '.item a', function(e) {
   console.log("### Items click"); 
});

$('#items2 .item a').on('click', function(e) {
    console.log("### Items2 click");
});

Run Code Online (Sandbox Code Playgroud)

这实现了相同的结果,因为单击列表中的项目将输出它们各自的消息.

观察绑定的事件,在第一种情况下,将一个click事件绑定到#items容器,没有事件绑定到子节点.但是,在第二种情况下,没有将 click事件绑定到父级#items2,但每个子元素都有一个click事件.

现在,我的问题是:一个明显优于另一个吗？天真,我会认为第一种情况更可取,但缺乏对jQuery内部的了解,很可能这两者在引擎盖下是相同的.

我准备了一个小提琴来演示这两个案例.观察jQuery为元素构建的事件,我得出了上述假设(您可以在Web浏览器的控制台中看到输出).