Unfortunately, I’ve changed my mind about this topic… again! (I’m a bit obsessive, it’s fine though). After commenting above, I now feel that this functionality does in fact belong in the core. My initial objections to adding these features to the Core were that:

a.) adding frivolous methods sucks. The jQuery namespace is fairly clean and small, and I like it that way. And, …

b.) I personally don’t like the idea of iterating through an array to produce dynamic method names in a core library. I use the same technique often, but never in the context of a framework; in my experience it leads to maintenance issues over time (but that’s just a matter of preference, of course :). And finally, …

c.) adding short-hand methods for all events could grow to be unwieldy, especially when you consider that an “add/bind” and “remove/unbind” method would be needed for each event.

Then after some thought, it dawned on me: What I was really looking for in the comment above was to minimize the number of methods added. The “Holy Grail” of event bindings (for me) would be to be able to create as many (or few) bindings as I need to on a given DOM collection, and to be able to do so easily (using a single method would be ideal). If only jQuery could determine whether:

a.) a key/value pair were passed as String/Function arguments, or

b.) a map of type/handler values was passed

This logic is already in place elsewhere in jQuery, for example in the $().css() and $().attr() methods. Both are able to apply individual key and value arguments, and operate once using them. But they’re also capable of applying a map of key/value pairs, iterating over them and applying each pair. So, really, I’m just dreaming of sexier $().bind() and $().unbind() implementations. And so, down the rabbit hole I went…

…and here’s what I came up with:

(function($) {

// Keep a copy of the old methods
$.fn._bind = $.fn.bind;
$.fn._unbind = $.fn.unbind;

// Redefine $().bind()
$.fn.bind = function( type, data, fn ) {
	// If only a map of handlers was passed...
	return (arguments.length === 1) ? 

	this.each(function(key, node) {
		// Iterate over the map...
		$.each(type, function(event, handler) {
			event == "unload" ?
				// ... using $.fn.one() for "unload" events...
				$(this).one(event, handler) :
				// ... and $.event.add() for others
				jQuery.event.add( this, event, handler );
		});
	}) :

	// Otherwise, use the existing implementation as of 1.3.2,
	// with slight syntactic modifications
	this.each(function(key, node) {
		type == "unload" ?
			// Use $.fn.one() for "unload" events...
			$(this).one(type, fn) :
			// ... and $.event.add() for others
			jQuery.event.add( this, type, fn || data, fn && data );
	});
};

// Redefine $().unbind()
$.fn.unbind = function(type, fn) {
	// If only a map of handlers was passed...
	return (arguments.length === 1) 

	this.each(function(){
		// Iterate over the map...
		$.each(type, function(event, handler) {
			// ... and unbind each using event.remove()
			jQuery.event.remove( this, event, handler );
		});
	}) :

	// Otherwise, use the existing implementation as of 1.3.2,
	// copied verbatim
	this.each(function(){
		jQuery.event.remove( this, type, fn );
	});
};

})(jQuery);

Usage would be similar to the existing $().bind() method, but allow for multiple event/handler pairs:

$("#myID").bind({
	click : function(e) {
		// handle click
	},
	mouseover : function(e) {
		// handle mouseover
	},
	mouseout : function(e) {
		// handle mouseout
	}
});

Or, with named functions (ideal for later use of $().unbind()):

$("#myID").bind({
	click : clickHandler,
	mouseover : mouseoverHandler,
	mouseout : mouseoutHandler
});

function clickHandler(e) {
	// handle click
}

function mouseoverHandler(e) {
	// handle mouseover
}

function mouseoutHandler(e) {
	// handle mouseout
}

With named function references, unbinding multiple events would be a breeze:

$("#myID").unbind({
	click : clickHandler,
	mouseover : mouseoverHandler,
	mouseout : mouseoutHandler
});

Now, of course if this were to be absorbed by the Core there would definitely be performance/syntactic/readibility improvements to be made, but it works beautifully as a prototype. The additional check against the number of arguments adds some extra overhead, but for me the ease-of-use justifies the extra processing. Imagine, two simple methods to encapsulate all binding/unbinding behavior… Furthermore, existing scripts which rely on binding events individually would not break, allowing backwards compatibility. All existing logic, such as using $().one() for “unload” events, is still intact. All that has changed is to loop through a map in the case that one is passed. Now, some known issues:

a.) The ability to pass custom data to $().bind() is lost when an object of event/handler pairs is passed. I personally don’t usually use it anyhow, and binding events individually will still support custom data (as the implementation is the same).

b.) Like the solution in my comment above, passing a map of event/handler pairs to $().unbind() requires that the handlers be references to named functions. Passing identical anonymous functions to $().unbind(), (as they were originally passed to $().bind()), will not work, even if the signatures and/or function bodies are the same.

What do you think? Would more versatile implementations of $().bind() and $().unbind() render this entire discussion moot? Thoughts? Are you reading this, John Resig :) ?

$.fn.on = function(eventMap /* Object */) {
    return this.each(function() {
        var elem = $(this);
        // Iterate through the map, binding each event to each handler
        $.each(eventMap, function(type, handler) {
            elem.bind(type, handler);
        });
    });
};

Usage is as follows:

$("#someID").on({
    click : function(e) {
        // Handle click
    },
    mouseover : function(e) {
        // Handle mouseover
    },
    mouseout : function(e) {
        // Handle mouseout
    }
});

Or, with named function references:

$("#someID").on({
    click : handleClick,
    mouseover : handleMouseover,
    mouseout : handleMouseout
});

function handleClick(e) {
	// Handle Click
}

function handleMouseover(e) {
	// Handle Mouseover
}

function handleMouseout(e) {
	// Handle Mouseout
}

Implementing an unbinding method is equally trivial:

$.fn.un = function(eventMap /* Object */) {
    return this.each(function() {
        var elem = $(this);
        // Iterate through the map, unbinding each handler
        $.each(eventMap, function(type, handler) {
            elem.unbind(type, handler);
        });
    });
};

Which enables unbinding in the same manner:

$("#someID").un({
    click : handleClick,
    mouseover : handleMouseover,
    mouseout : handleMouseout
});

NOTE: When using the “on” method, the functions corresponding to the event names can be either anonymous functions or references to named functions. In the case of the “un” method, however, the functions MUST be named function references.

The full plugin:

(function($) {

    $.fn.on = function(eventMap /* Object */) {
        return this.each(function() {
            var elem = $(this);
            // Iterate through the map, binding each event to each handler
            $.each(eventMap, function(type, handler) {
                elem.bind(type, handler);
            });
        });
    };

    $.fn.un = function(eventMap /* Object */) {
        return this.each(function() {
            var elem = $(this);
            // Iterate through the map, unbinding each handler
            $.each(eventMap, function(type, handler) {
                elem.unbind(type, handler);
            });
        });
    };

})(jQuery)

Keep up the good work!

for (var i=0; i < etLength ; i++) {
    $.fn[ 'un' + eventTypes[i] ] = (function(type) {
        return function(fn) {
            return this.unbind( type, fn );
        };
    })(eventTypes[i]);
}

Of course, you could also factor the outer anonymous function into a makeUnbind function or something like that since it doesn’t need to close over any local variables.