Question

I am looking for a better way to bind multiple events to a single element in jQuery. I am trying to avoid writing multiple $(element).bind(‘event’, …) or $(element).event(…) statements.

Code

// old way    
var textbox = $('input');
$(textbox).focus(function() { ... }
$(textbox).blur(function() { ... }

// new way
$(textbox).extend({
    focus: function() {
           ...
    },
    blur: function() {
            ....
    }
});

Unfortunately, this implementation is not working. Does anyone have a better suggestion? Thank you.

Answer 1

All of the answers so far assume you want to bind the same callback function to multiple events. If that’s not the case, consider using .on() with an event map:

$('selector').on({
    focus: function(e) {
        // do something for focus
    },
    blur: function(e) {
        // do something else entirely for blur
    },
    ...
}