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

从性能的角度来看，总是建议尽可能少的监听器，尤其是在动态添加/删除附加了监听器的按钮或元素的情况下。

在第二种情况下所做的称为event delegation，当您动态创建元素并且希望在添加侦听器之后创建的节点上触发该侦听器时，此功能非常有用。

除非您需要高性能应用程序（例如游戏），否则性能差异不会很明显，因此，通常应采用可读性更高的内容，或者如果元素具有动态更改，则应采用委派。

>

我实际上已经创建了一个小型库，以更轻松地为创建的元素实现事件委托：https://github.com/Cristy94/dynamic-listener

Javascript多功能与大型功能

3 个答案: