javascript - 一个 on() 中的多个 on() 或 switch()

Question

我的页面上有一个菜单，目前正在编写为菜单按钮设置所有点击事件的脚本。每个按钮都会调用自己的方法，因此必须明确设置。

我的问题很简单，是在这种情况下使用以下两种方法中的哪一种更好：

$(document).on('click','#menu .button', function(){
    switch($(this).attr('id')){
        case 'foo_button':
            // Set the event for the foo button
        break;
        case 'bar_button':
            // Set the event for the bar button
        break;
        // And the rest of the buttons
    }
});

或者：

$(document).on('click','#foo_button',function(){
    // Set the event for the foo button
});
$(document).on('click','#bar_button',function(){
    // Set the event for the bar button
});
// And the rest of the buttons

我原以为选项 1 会更好，因为它只设置一个事件……但是，每次单击菜单按钮时都会调用此事件，因此很难知道哪个更有效。

Answer 1

如果每个不同的按钮 ID 的处理函数确实不同，那么每个按钮都应该使用自己的调用来注册on()。

它可能不会对你的代码性能产生明显的影响，但它会让其他开发人员（甚至你自己为了维护）在未来更容易阅读。