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

除非您拥有大量不合理的按钮和功能，否则对现代计算机的性能影响可以忽略不计。 最好先考虑代码的可读性和可维护性——只有在你有证据表明这是一个不可忽视的问题时才考虑性能问题。

Answer 2

两种情况下的时间差异都可以忽略不计，但是我认为使用不同的函数会具有更好的性能，因为分支语句少了一个。

就代码可读性而言，当按钮使用不同的参数执行类似的工作时，我使用单一功能，而当工作不同时，我使用不同的功能。

Answer 3

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

您在第二种情况下所做的称为事件委托，当您动态创建元素并且希望在添加侦听器后创建的节点上触发侦听器时，它非常有用。

性能差异不会很明显，除非您需要将其用于高性能应用程序（例如游戏），因此您通常应该使用更具可读性的任何内容，或者如果您有动态变化的元素，则使用委托。

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