HTML and CSS Reference
In-Depth Information
exactly? Well, all it does is call the function on that object that has the correct handler name. In the
previous example, document
02-event-demo.html
added the canvas element as a listener for a couple
of mouse events. Internally, the element keeps a list for each event. So it has a list for the
mousedown
event and another list for the
mouseup
event.
When the user presses the mouse button on the canvas element, the element responds, “Hey! Mouse
down! Must notify listeners!” It then goes through its
mousedown
list and sees what is in there. The element
finds a reference to the function that was specified as a handler and then calls that function on the listener.
If other objects had registered as listeners to the
mousedown
event, they would also be on the list, and
whatever handlers they had defined would be called.
The same thing happens when the mouse is released, except it looks at its
mouseup
list.
Those are the basics of events and handlers. Next, we introduce you to some of the event types used for
interaction.
Mouse events
To capture a mouse event, you must add a listener to a DOM element to handle the event. Mouse event
types are defined by strings, and different browsers have varying levels of support for particular events.
Here is a list of the most common ones:
mousedown
mouseup
click
dblclick
mousewheel
mousemove
mouseover
mouseout
These mouse event types are self-explanatory. To get a feel for them, create and run the following
document, which prints to the console each mouse event as it occurs on the canvas element. You can find
this file with the rest of the example code,
03-mouse-events.html
:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mouse Events</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
window.onload = function () {
