如何更好地处理事件

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其中包含要与事件类型名称绑定的函数作为键:

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

我个人会使用后一种方法.on()使用相当丑陋的if语句来分割事件类型时,取消了统一处理程序的重点.

Answer 2

是! jQuery传递包含事件信息的事件对象:

$("body").on("change click", ".element", function(e) {
    console.log(e.type);
});

Answer 3

你可以使用event.type.有人会说这是不好的做法,其他人可能会发现它很有用.

$("body").on("change click", ".element", function(event) {
    switch (event.type) {
        case 'click':

        break;
        case 'change':

        break;
        default:
    }
});

jQuery event.type