还有什么更昂贵的性能：将事件绑定到框内的所有元素还是绑定到整个框？

Question

我有一个Feed，其中包含网站上的更新-就像Facebook或Google+一样。此外，当页面向下滚动时，越来越多的更新将被加载到底部（滚动条到达页面底部时，+ 20）。每个更新都是一个单独的框，其中包含许多链接。我需要将“点击”事件绑定到每个框内的所有这些链接以及新功能。

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

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

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

2. 将事件绑定到框本身（甚至绑定到Feed包装器）上，并单击目标对象，从而根据被单击的目标执行必要的功能：

   $(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
});

请参见documentation for on()，特别是有关“直接事件和委派事件”的部分。