javascript - Web 应用程序的事件监听器最佳实践

Question

我正在制作一个网络应用程序，我的 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();
    });

这表明我有各种从 DOM 动态添加和删除的按钮。单击它们时，将调用一个函数。

有什么建议吗？我是否已经走在正确的道路上，或者有更好的方法来组织这个？

Answer 1

我发现 $('#button').click(function(){}) 快捷方式更加简洁。

此外，您的前两个事件处理程序非常相似，可以变得更加通用，即将操作作为变量传递:

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