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