Javascript 多个函数与更大的函数

Question

如果我有 10 个按钮，我是否最好有一个事件监听器指向每个按钮并调用不同的函数:

hdlButton1.addEventListener("click", fButton1Clicked);
hdlButton2.addEventListener("click", fButton2Clicked);
etc.

function fButton1Clicked(event) {
    //code to execute upon button 1 click
}
function fButton2Clicked(event) {
    //code to execute upon button 1 click
}

或者让所有点击都指向一个函数:

 document.addEventListener("click", fButtonClick);

 function fButtonClick(event) {
     switch (event.target.id) {
         case "btn1":
              //code to handle button 1 click
              break;
          case "btn2":
              //code to handle button 2 click
              break;
        }
}

使用多个函数来处理各种事件与使用单个函数来区分事件并进行适当处理相比，对性能有何影响？

(谢谢)

Answer 1

从性能的 Angular 来看，始终建议尽可能少的监听器，尤其是当您动态添加/删除附加了监听器的按钮或元素时。

你在第二种情况下所做的叫做event delegation ，当您动态创建元素并且希望在添加监听器后创建的节点上触发监听器时，它非常有用。

除非您的高性能应用(例如游戏)需要性能差异，否则性能差异不会很明显，因此您通常应该选择更具可读性的内容，或者如果您有动态变化的元素，则使用委托(delegate)。

我实际上创建了一个小型库来更轻松地为创建的元素实现事件委托(delegate):https://github.com/Cristy94/dynamic-listener