Web應用程序的事件監聽器最佳實踐

Question

我正在製作一個Web應用程序，並且我的JavaScript正在收集相當多的$（document）.on事件監聽器。它對我來說工作得不錯，但感覺好像有一個更好的方法來組織它。下面是一個示例：

// send quiz info via Ajax, then load form for the first question. 
    $(document).on('click', '#create-new-quiz', function(){ 
     createNewQuiz(); 
     $('#forms').load("dash/workspace.php", { 
      action : 'get-new-question' 
     }); 
    }); 

    // load the form to create the first question 
    $(document).on('click', '#finish-quiz', function(){ 
     addQuestion(); 
     $('#forms').load("dash/workspace.php",{ 
      action : 'finish-quiz' 
     }); 
    }); 

    //call function to add a new question via ajax when the button is clicked. 
    $(document).on('click', '#add-question', function(){ 
     nextAction = "add-question"; 
     addQuestion(); 
    }); 

這表明我有各種各樣的動態添加和刪除的按鈕。當他們被點擊時，一個函數被調用。

有什麼建議嗎？我是否已經走上了正確的道路，還是有更好的方式來組織這個？

Answer 1

我發現$('#button').click(function(){})捷徑是整潔的。

而且，你的前兩個事件處理程序是相當相似的，可以作出一個更通用一些，即通過一個動作爲一個變量：

$('.quizButton').click(function(e){ 
    createNewQuiz(); 
    $('#forms').load("dash/workspace.php", { 
     action : $('this').data('action'); 
    }); 
});