Event Capturing

Registering event handlers

Inline model

<a onClick="...">

• Earliest model
• Supported by all browsers

• In the inline code, this refers to the element
• In the inline code, event refers to the event object (FF, IE6, IE7, Safari, ...)

• event.currentTarget :  The element whose event listeners triggered the event
• event.target :  The element that triggered the event

• If the inline code returns false, it indicates "don't take the default action" (i.e. using an <a> tag in onclick) 
• To update the browser status bar (window.status) when the user mouseovers a link, a value of true must be explicitly returned

• For browsers that support the W3C DOM, you get event bubbling
• Mixes HTML and JavaScript code (avoid when possible for this reason)
• HTML attribute name for the event is case insensitive

Traditional model

element.onclick = myFunction;
element.onclick = function() { ... }
element.onclick = function(event) { ... }

• Supported by all browsers
• Copies the function to the onlick property 

• In the function, "this" refers to the DOM element.
• If "event" is listed as a parameter for an anonymous function, it refers to the event object (FF, IE6, IE7, Safari, ...).
• When the event handler is defined within a function, it's in the closure of that function.

• If the function returns false, it indicates "don't take the default action" (i.e. using an <a> tag in onclick).
• To update the browser status bar (window.status) when the user mouseovers a link, a value of "true" must be explicitly returned.

• For browsers that support the W3C DOM, you get event bubbling.
• This, and the inline model, are the only cross-browser options for registering events.
• The name of the property is case sensitive (generally, the events are all lowercase).

W3C DOM model

element.addEventListener('click', myFunction, false);

    parameters:
        1: event type
        2: event handler function
        3: capture (true) or bubble (false)

• Copies the function to the on<eventtype> property (for the example above, onclick)

• Not supported by IE
• Within the function, "this" refers to the element and "event" refers to the event object (FF, Safari, ...)
• Supports both event capturing and event bubbling

• Multiple event handlers for the same type of event can be assigned to an element; they're distinguished by their parameters
• If a duplicate event handler is added (same parameters), the duplicate is discarded

• removeEventListener() uses the same set of parameters as addEventListener()
• To remove an event handler, all of the parameters for removeEventListener() must match those used for addEventListener()

• Might not be widely supported yet

IE model

element.attachEvent('onclick', myFunction);

    parameters:
        1: event type
        2: event handler function 

• Assigns a reference to the function to the onclick property (rather than copying the function)

• In the function, "this" refers to the document window

• Only supported by IE (IE >= 5)
• Events always bubble

Return values

function clickHandler(e) {
    ...
    // Allow the default behavior for the event (usually happens by default)
    return true;
    ...
    // Suppress the default behavior for the event (i.e. clicking on a link)
    return false;
}

Event capturing vs event bubbling

Event bubbling

• The event is handled by the child element first, and then by the parent element
• More common than event capturing

Event capturing

• The event is handled by the parent element first, and then by the child element

Stopping event propagation

• Applies to event bubbling
• There's no way to stop the propagation of event capturing 

function myFunction(e) {
  e = e || window.event;

  // handle event
  // ...

  // Stop the event from bubbling up to ancestor elements
  e.cancelBubble = true; // IE
  if (e.stopPropagation) {
    e.stopPropagation(); // FF
  }
}

Firing events

• Manually firing events doesn't always work as expected (for security reasons)