codeNothing?
Web Development from a Beginner

One of the more powerful parts of jQuery, is it's event's module. There's a lot more to it than just adding mouse handlers to give a hover effect. In fact, the best part of jQuery event's, is namespacing.

// Base events from jQuery-1.3.2.js
jQuery.each( ("blur focus load resize scroll unload click dblclick " +
        "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
        "change select submit keydown keypress keyup error").split(" "), function( i, name ) {

        // Handle event binding
        jQuery.fn[ name ] = function( fn ) {
                return fn ? this.bind( name, fn ) : this.trigger( name );
        };
});

The above snippet was taken straight from the source of jQuery-1.3.2.js. What's happening is all the base event plugins are set-up with the bind method and ran with the trigger method. This just creates short-cuts from jQuery objects for things like setting up a key handler with: $('input').keyup(fn..), or triggering a focus event with $('textarea').focus().

Namespacing come into play when a few different event's of the same type are attached to the same element. Take the following example:

$('a').click(function(){
	$('#elem').css('color', 'red');
})
.click(function(){
	$('#elem').css('background-color', 'blue');
})
.click(function(){
	$('#elem').css('font-size', '8pt');
});

If the user actions only require for the background of the #elem to turn blue or the color to turn red on click, then this set of events wont work. What's needed is a way to trigger these events separately:

$('a').bind('click.color', function(){
	$('#elem').css('color', 'red');
})
.bind('click.bgcolor', function(){
	$('#elem').css('background-color', 'blue');
})
.bind('click.font', function(){
	$('#elem').css('font-size', '8pt');
});

// Changes the color only
$('a').trigger('click.color');
// Changes background color only
$('a').trigger('click.bgcolor');
// Changes font-size only
$('a').trigger('click.font');

With namespacing, there is access to triggering a single namespace of a certain event, and more specifically, triggering that event, without triggering every other event of the same type.

Another bonus to the bind method, is the ability to create your own custom event's. Taking the same example from above, here's a new way to do it with custom event's:

$('a').bind('change-color', function(){
	$('#elem').css('color', 'red');
})
.bind('change-background', function(){
	$('#elem').css('background-color', 'blue');
})
.bind('change-font', function(){
	$('#elem').css('font-size', '8pt');
});

// Changes the color only
$('a').trigger('change-color');
// Changes background color only
$('a').trigger('change-background');
// Changes font-size only
$('a').trigger('change-font');

In this scope, the change-color, change-background, and change-font event's are attached to the 'a' element, and are triggered separately. Remember that these functions need to be manually triggered, as these aren't native event's, and won't be triggered natively by the browser. For some practical use case's, I will refer to the autoComplete plugin:

// Taken from autoComplete-5.0 source

// Add enabling event (only applicable after disable) 
.bind('autoComplete.enable', function(event){ 
	$input.data('ac-active', Active = TRUE); 
	// Store & return event 
	return LastEvent = event; 
}) 
// Add disable event 
.bind('autoComplete.disable', function(event){ 
	// Store event 
	$input.data('ac-active', Active = FALSE); 
	$ul.html('').hide(event); 
	// Store & return event 
	return LastEvent = event; 
}) 

There are a few things going on in this example, but the focus should be on the bind method presented. The autoComplete custom event is being use with namespacing so that only the autoComplete namespace is used in the event module of this input.

If enable and disable were attached directly to the input, and another developer added their own enable and disable event's, then triggering would fire both of them:

/**
 * Developer 1
 */
$('#elem').bind('enable', function(){
	// Some Code
})
.bind('disable', function(){
	// Some Code
});

/**
 * Developer 2
 */
$('#elem').bind('enable', function(){
	// Some other code
}).bind('disable', function(){
	// Some other code
});

// Later on in the application, triggering
// enable will run both developer 1&2's code
$('#elem').trigger('enable');

It's fully recommended to download a copy of the source, or even more importantly, keep up with the latest changes and see how the pro's work. Please direct any question's or comments to corey@codeNothing.com, I am more than happy to help.