效率：一个事件处理程序或多个

Question

有一个关于将多个对象绑定到单击事件here 的问题有一个很好的答案，但答案只涉及容器内的按钮。我想知道如果有一个更复杂的结构会发生什么，其中按钮内有元素，容器内有非按钮元素。使用单个事件处理程序是否仍然更有效？

考虑一下这个（不那么复杂的）HTML：

<div id="container">
    <div class="some nice red block"></div>
        <div id="button_1" class="button">
           <span>some text</span>
           <img src="button_1_img.jpg">
        </div>
    <p>some more text</p>
    <img src="a_nice_pic.png">
        <div id="button_2" class="button">
           <span>some text</span>
           <img src="button_2_img.jpg">
        </div>
        <div id="button_3" class="button">
           <span>some text</span>
           <img src="button_3_img.jpg">
           <div class="some icon"></div>
        </div>
    <p>some more text</p>
    <img src="a_nice_pic.png">

    //... more text, images and let's say up to 20 buttons

</div>

我可以：

1. 为所有按钮分别添加事件监听器
2. 只向容器添加一个事件处理程序

万一我需要：

document.getElementById('button_1').addEventListener('click',dosomething,false);
document.getElementById('button_2').addEventListener('click',dosomething,false);
//etc... 18x

function dosomething(e){
   var button=e.currentTarget.id;
   //do something based on button id;
   }

然后，我将 20 个点击处理程序附加到 20 个不同的按钮上，这些按钮只有在单击按钮时才会触发。

如果我需要案例 2：

document.getElementById('container').addEventListener('click',dosomething,false);

function dosomething(e){
    var container=e.currentTarget;
    var clicked=e.target;

    while(clicked != container){
        if(clicked.className == 'button'){
            var button=clicked.id;
            //do something based on button id;
           return; 
           }
        else{
           clicked=clicked.parentNode;
           }
     }
}

现在我只有一个事件监听器。但它不仅会触发按钮，还会触发您在容器内单击的所有内容。它每次都必须向上移动 DOM 以检测单击的元素周围是否有按钮。

那么两者中哪一个在内存使用和性能方面最有效？ 一个有更多事件处理程序但要做的事情更少，还是只有一个事件处理程序但代码更复杂？

我创建了一个fiddle 来展示差异。

[edit] 也许我把这个例子过于简单化了。有时会在最多 4 个容器中附加大约 200 多个均匀监听器。

Answer 1

有一个关于将多个对象绑定到单击事件here 的问题有一个很好的答案，但答案只涉及容器内的按钮。

没有。只有它的标记示例不包含其他元素，但它也适用于您的情况。

$(common parent selector).on('click', selector of target objects, function() {});
                                      ^^^^^^^^^^^^^^^^^^^^^^^^^^

您的标记将是 $("#container").on("click", ".button", …)。

那么两者中哪一个在内存使用和性能方面最有效？一个有更多事件处理程序但要做的事情更少，还是只有一个事件处理程序但代码更复杂？

两者都没有。正如您刚刚注意到的，这是一种权衡：单个事件处理程序将占用更少的内存；并且多个事件处理程序在被点击时要做的事情更少。

我认为您的 20 个按钮没有任何问题。如果您使用数百个处理程序，内存需求只会影响性能。我建议使用更简单的解决方案——特别是如果你不使用为你做复杂事情的库——并且只有在性能下降时才尝试事件委托。不要过早地进行优化。

Answer 2

正如我在评论中所说，我会按照以下方式进行操作。

var buttons = document.querySelectorAll('.button');
[].forEach.call(buttons, function(button) {
  button.addEventListener("click", dosomething);
});

function dosomething(e) {
    var button=e.currentTarget.id;
    alert (button);
}

这只会将事件侦听器附加到按钮，而不是像您在问题中显示的容器。 atm 有点过时，但会回来添加更多细节 :) 同时，大家：随时编辑和添加您宝贵的 cmets！