How to better handle events

Question

If I have multiple events on an element I am currently handling those events as written here:

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

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

Is there a way to combine all the events on an element in one on() call? What is the best practice if there are multiple events associated with one element?

$("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

You can use the type property of the event to determine which logic to execute:

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

Alternatively you can provide an object to on which contains the functions to bind with the event type names as the keys:

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

Personally I would use the latter method. The whole point of having a unified on() handler is negated when using a rather ugly if statement to split the event types.

Answer 2

Yes! jQuery passes the event object which contain the event information:

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