javascript - 如何更好地处理事件

Question

如果我在一个元素上有多个事件，我当前正在处理这些事件，如下所示:

$("body").on("click", ".element", function(e) {
    // Do something on click
});

$("body").on("change", ".element", function(e) {
    // Do something on change
});

有没有一种方法可以在一次 on() 调用中组合元素上的所有事件？如果有多个事件与一个元素关联，最佳实践是什么？

$("body").on("change click", ".element", function(e) {
    // Can I detect here if it was change or click event and perform an action accordingly?
});

Answer 1

您可以使用事件的type属性来确定要执行的逻辑:

$('body').on('change click', '.element', function(e) {
    if (e.type == 'click') {
        // do something...
    } 
    else if (e.type == 'change') {  
        // do something else...
    }
});

或者，您可以向 on 提供一个对象，其中包含与事件类型名称作为键绑定(bind)的函数:

$('body').on({
    click: function() {
        // do something on click...
    },
    change: function() {
        // do something on change...
    }
}, '.element');

我个人会使用后一种方法。当使用相当丑陋的 if 语句来拆分事件类型时，拥有统一的 on() 处理程序的全部意义就被否定了。