Main Page

Types of Events

When the button is clicked on this page, three alerts are displayed one after another:
. This happens, of course, because the event bubbles up from the
element to
and then to
. If, however, you stop the event propagation at the button, things change:
<html onclick=”alert(‘html’)”>
<title>Stopping Event Propagation Example</title>
<script type=”text/javascript” src=”detect.js”></script>
<script type=”text/javascript”>
function handleClick(oEvent) {
if (isIE) {
oEvent.cancelBubble = true;
} else {
<body onclick=”alert(‘body’)”>
<input type=”button” value=”Click Me” onclick=”handleClick(event)” />
When this example is executed and the button is clicked, you only see the
alert and none of
the others because the propagation has been stopped. In order to do this correctly, you make use of the
browser detection code from the last chapter.
You may also notice that the
element passes in the
object as an argument to the
function. This works in all browsers because the
object is created as soon as
the event happens and is a global variable at this point.
Types of Events
The events that occur in a browser can be grouped into several specific types, depending on the object
the event is fired from and what triggered the event to fire. The DOM specification defines the following
event groups:
Mouse Events are fired when the user uses the mouse to perform certain actions.
Keyboard Events are fired when the user types on the keyboard.
HTML Events are fired when certain changes occur to the browser window or specific client-
server interaction occurs.
Mutation Events are fired when a change occurs to the underlying DOM structure.
All about Events
12_579088 ch09.qxd 3/28/05 11:39 AM Page 279

JavaScript EditorFree JavaScript Editor     Ajax Editor