From jQuery JavaScript Library

jQuery's event system normalizes the event object according to W3C standards. The event object is guaranteed to be passed to the event handler (no checks for window.event required). So far it normalizes the target and pageX/Y properties and provides both stopPropagation() and preventDefault() methods.

Things to do here: Document mouse/keyboard properties, see Yehuda's blog for reference. Provide some more complex examples of the event system, and add links to the API methods.

event.type

Describes the nature of the event.

Return value: String
Example:

 $("a").click(function(event) {
  alert(event.type);
});

 "click"

event.target

Contains the DOM element that issued the event. This can be the element that registered for the event or a child of it.

Fixed where necessary (IE, Safari).

Use to implement event delegation.

Return value: Element
Example:

$("a[@href=http://google.com]").click(function(event) {
  alert(event.target.href);
});

"http://google.com"

Example:

function handler(event) {
  var $target = $(event.target);
  if( $target.is("li") ) {
    $target.children().toggle();
  }
}
$("ul").click(handler).find("li > ").hide();

event.pageX/Y

The pageX/Y property pair returns the mouse coordinates relative to the document.

Fixed where necessary (IE).

Return value: String
Example:

$("a").click(function(event) {
  alert("Current mouse position: " + event.pageX + ", " + event.pageY );
});

"Current mouse position: 130, 640"

event.preventDefault( )

Prevents the browser from executing the default action.

Fixed where necessary (IE).

Return value: undefined

Example:

$("a").click(function(event){
  event.preventDefault();
  // do something
});

event.stopPropagation( )

Stops the bubbling of an event to parent elements, prohibiting any parent handlers to get to handle the event. Note that this will not prevent other handlers on the same element from running.

Fixed where necessary (IE).

Return value: undefined

Example:

$("p").click(function(event){
  event.stopPropagation();
  // do something
});

Namespacing events

Generally you do something like:

$('.class').click(function(){//whatever});

Which can be rewritten as:

$('.class').bind('click', function(){//whatever});

Problem: sometimes you need to unbind something:

$('.class').unbind('click');

The problem with this is that it will unbind all the click events, not just yours. So if multiple bits of javascript have a click event handler for '.class', unbinding removes them all. (This is because there is no way to identify an anonymous function.)

You could create a reference for the function and use that for both bind and unbind.

function handler() { ... }
$('.class').bind('click', handler);
$('.class').unbind('click', handler);

Obviously that requires that you can reference the function, which can get very ugly when binding and unbinding happens in different places in your code.

Fortunately, jQuery provides namespaced events: Simply add a classname to your event when you declare it. You can then reference that namespaced event both with unbind and trigger.

$('.class').bind('click.namespace', function(){//}); 
$('.class').trigger('click.namespace');
$('.class').unbind('click.namespace');

This may also come in handy when reinitializing events after an ajax request:

$('.class').unbind('click.namespace').bind('click.namespace', function(){//});