Spying on elements!

Definition

An event is a "message" sent by the browser to inform that the internal state of a DOM object has changed.

DOM objects concerned can be the window or any element node of the DOM tree.

To get these "messages", you must use listeners.

This design pattern is know as the "observer pattern".

There are different ways of listening to events on elements of the DOM. The correct solution is to use the addEventListener method directly on the element.

In order to keep the content/behaviour separation, you shouldn't use onclick, onload... attributes in your HTML code.

If you use IE before version 9, you'll have to deal with their specific method attachEvent. Event names a prefixed by on and the event object is not passed to your callback, it can be accessed with window.event.

Add

<div id="james" onclick="bond()">
<!-- no content/behaviour separation :-( -->

var james = document.getElementById('james');

james.onclick = bond;                         // only one listener :-(

james.addEventListener('click', bond, false); // W3C Standard

james.attachEvent('onclick', bond);           // IE < 9            :-(

var bond = function(ev) {
  ev = ev != null ? ev : window.event;        // IE < 9 needs this :-(
  console.log(ev);
  console.log('My Name is Bond...');
  setTimeout(function() { console.log('...James Bond.'); }, 800);
}

• addEventListener reference (MDN)

Remove

Same remarks as for adding event listeners, use the W3C standard when you can. Note that you must use the same function reference to remove an event listener. Removing an anonymous function won't work.

var james = document.getElementById('james');

div.onclick = null;

div.removeEventListener('click', bond, false);  // W3C Standard

div.dettachEvent('onclick', bond);              // IE < 9         :-(

• removeEventListener reference (MDN)

Example

Try to click on the actors with or without maintaining the ctrl key down.

Common properties

When you receive an event with your listener, you can access the event object. It has several useful properties like target or type. Some of them are used in special conditions like bubbling, capturing or cancelling. See reference for more details.

• target
• type
• timeStamp
• eventPhase
• bubbles
• currentTarget
• cancelable
• defaultPrevented
• isTrusted

• Event reference (MDN)

UI Events

UI Events are special kind of events important for window, resources like images or just simple HTML elements.

• load
• unload
• abort
• error
• resize
• scroll
• select

• User Interface Event Types (w3c.org)

Example : scroll

Scroll the window with your mouse or using the scrollbars!

Example : Mouse events

Example : Keyboard events

Example : Focus events

Click on the two gray input text!.

Forms

These events are specific to HTML forms and are not part of the DOM 3 specification. See reference for more details...

Events

• change
• submit
• reset

• DOM Events 2 HTML events (w3c.org)
• Why form events are not in the DOM Events 3 specification (w3c.org)

There's more...

Mutation events were a DOM Events level 2 specification. There's a few reason for its deprecation in DOM Events level 3. There's a work in progress to find a replacement. See reference for more details.

In order to go further from just handling simple keyboard events, the textinput event is added to handle new ways to input text : speech, handwriting... See reference for more details.

Composition events are also added to handle specific and special text input. See reference for more details.

• Touch gestures
• Device orientation
• Custom events
• Drag n drop
• History
• Message
• Mutation
• TextInput
• Composition
• Wheel

• Touch Events (w3c.org)
• Device Orientation Events (w3c.org)
• Mutation Event Types (w3c.org)
• Wheel Event Types (w3c.org)
• Text Event Types (w3c.org)
• Composition Event Types (w3c.org)

Principle

When an event is fired on an element of the DOM, the event registered listeners are invoked. After this step, most events “bubble” up the DOM tree.

This behaviour can be used to improve performances. Instead of adding N listeners for N sibling elements, just listen to their parent. Because of event propagration your unique listener set on the parent will still receive events fired on children elements.

You can determine if the event you're dealing with has been bubbled to your listener or not with eventPhase property.

You can prevent an event from bubbling up the DOM tree by calling stopPropagation() on the event.

Bubbling is also called propagation.

// Determine if the event has bubbled up to the listener
console.log(ev.eventPhase === Event.BUBBLING_PHASE); // true

// Prevents event from "bubbling" up the DOM tree
ev.stopPropagation();

Example : propagation

Principle

A lot of events have a default behaviour. The most common example is clicks on links.

You can determine if the default behaviour of an event can be cancelled using the cancelable property.

You prevent an event from firing default behaviour after being handled by your listener by calling preventDefault() on the event.

// Determine if the default behaviour of the event can be cancelled
console.log(ev.cancelable);

// Prevents event from firing default behaviour
ev.preventDefault();

Example : cancellation

Principle

When you listen to events on a given element using the W3C standard addEventListener method, you can specify if you want to capture events.

A listener with capture will receive events from children elements BEFORE they receive it themselves.

// Set last argument to true to capture
// Doesn't work on IE < 9 with attachEvent
james.addEventListener('click', bond, true);

// Determine if the event was "captured" by the listener
console.log(event.eventPhase === Event.CAPTURING_PHASE); // true

Example

How jQuery helps

In general jQuery makes the code easier to read when dealing with events. It's incredibly easier to implement event delegation. It also helps a lot to deal with IE strange way to manipulate events.

Classic on/off

Since jQuery 1.7, all event listening are done using on and off methods. If you were used to use bind/unbind, delegate/undelegate or live/die, you should stop and prefer on and off.

For example a classic addEventListener like this :

var james = document.getElementById('james');
james.addEventListener('click', bond, false);

Would be replaced by this jQuery code :

$('#james').on('click', bond);

It also works for many elements.

var lis = document.querySelectorAll('#actors li');
for (var i = 0; i < lis.length; i++) {
  lis[i].addEventListener('click', callback, false);
}

$('#actors li').on('click', callback);

The code above creates as many listeners as li elements in the DOM. It's usually bad. Be sure to prefer a syntax that leverage event delegation.

You could also use shortcuts like that. There's almost one shortcut for each event type.

$('#actors li').click(callback);
// same shortcuts for other events

When you wanna removeEventListener, just call off method.

$('#actors li').off('click', callback);

Event delegation

The new on method eases event delegation. Just select the node you want to delegate events to using $ and pass the targeted children selector as second argument of on.

This example would be easy to change to use event delegation.

// Doesn't uses event delegation
$('#actors li').on('click', callback);

Now that's better.

// Uses event delegation
$('#actors').on('click', 'li', callback);

It's almost the same as doing that :

// More or less equivalent to that
var ul = querySelector('#actors');
ul.addEventListener('click', function(ev) {
  if (ev.target.nodeName === 'LI') {
    callback(ev);
  }
}, false);