javascript - 什么是更昂贵的性能：将事件绑定到盒子内的所有元素或绑定到整个盒子？

Question

我在网站上有一个更新的提要——就像 Facebook 或 Google+ 一样。此外，当页面向下滚动时，越来越多的更新在底部加载（当滚动条到达页面底部时+20）。
每个更新都是一个单独的盒子，里面有很多链接。我需要将“点击”事件绑定到每个框内的所有这些链接以及新的链接。

从性能的角度来看，什么更便宜？

1. 要将事件绑定到每个框内的所有链接：

   $(box).find('.link1').on('click', …);
   $(box).find('.link2').on('click', …);
   …
   

2. 将事件绑定到框本身（甚至是提要包装器），然后单击卡车目标元素，根据单击的目标执行必要的功能：

   $(box).on('click', function(e) {
     var target = $(e.target);
   
     if (target.is('.link1')) …
     if (target.is('.link2')) …
   });
   

Facebook/Google+ 是如何做到的？将事件绑定到单个链接或将事件绑定到整个框，然后根据目标进行委托？

目前，我觉得浏览器需要大量内存才能让所有必要的 DOM 对象绑定事件，尤其是当我向下滚动到有 200 多个更新时。

Answer 1

这是事件委托的主要案例：

$('someContainer').on('click', 'a', function(e) {
    //'this' is the event target
});

请参阅文档on()，特别是有关“直接和委托事件”的部分。