Basics of JavaScript for Animation - HTML5 Animation with JavaScript - page 22

The shapes that we draw to the canvas element have no built-in means for detecting events. But, the
HTML elements do, which means that we can capture user input using the DOM interface, calculate where
the event occurred relative to the drawn objects, and make decisions based on this information. In this
section, we look at how to capture DOM events, and in later chapters, we'll see how to use them to add
interaction to an animation.
Listeners and handlers
As just stated, a listener is an object that listens for events. You can specify a DOM element as a listener
for a particular event by calling its method addEventListener . You pass it a string as the first argument,
which is the type of the event to listen for, and a handler function that is called when the element receives
this event. Here's what the syntax looks like:
element.addEventListener(type, handler [, useCapture]);
The third argument is usually optional, however, in some browser implementations it is not. For that
reason, in this topic, we always pass a value of false for useCapture , which is the default. This affects
how an event bubbles up the DOM tree, but is not applicable to the examples in this topic. For details
about DOM event model flow, see the specification at http://www.w3.org/TR/DOM-Level-3-
Events/#event-flow .
A typical example is listening for a mouse press on a canvas element (mouse events are discussed
shortly):
canvas.addEventListener('mousedown', function (event) {
console.log("Mouse pressed on element!");
}, false);
The first argument, the event type 'mousedown' , is a string. Make sure you double-check the spelling of
the event type you're listening for, because a typo here can mean you're waiting for an event that doesn't
exist. addEventListener happily listens for any event type you specify, so this can be a difficult bug to
track down (and you won't be happy when you do).
Now, I've said a listener listens for events, but perhaps a more accurate description is that a listener is
notified of events. Internally, the object that generates events keeps a list of every object that has added
itself as a listener. If an object is capable of generating different types of events, such as mousedown ,
mouseup , and mousemove , it keeps a list of listeners for each event type it can generate. Whenever one of
these events occurs, the object runs through the corresponding list and lets each object in that list know
what event has occurred.
Another way of describing events is that the object that becomes a listener is subscribing to a particular
event. The object that generates the event is broadcasting the event to all its subscribers.
Additionally, if you no longer want an object to listen for a particular event, you can tell it to stop listening,
or unsubscribe, by calling its removeEventListener method. Notice it has the exact same parameters as
the addEventListener method:
element.removeEventListener(type, handler [, useCapture]);