Chapter 6. Catching Events


Events let you know when a user is doing something or when a page has loaded. Catching and handling events lets your code do the right thing at the right time, serving the users of your programs.

Regardless of why they happen or how they're implemented, events in JavaScript are associated with objects and are not intrinsic to the language itself. Typically, when working with browsers, events are related to the DOM implemented in each browser.

There is a default behavior associated with each event, but events can be used to modify functionality or add additional functionality. Extending the event behavior can be managed within the (X)HTML tag for the object, or in a separate JavaScript code block or file.

The events themselves are fairly intuitive. The W3C (World Wide Web Consortium) categorizes events into three distinct areas: user interface (mouse, keyboard), logical (result of a process), and mutation (action that modifies a document). The basic events, affected objects, and descriptions are listed in Table 6-1.

Table 6-1. Events and affected objects
EventDescriptionObject(s)
abort When image is prevented from loadingAn image element
blur, focus When object loses or receives focusApplicable to window and form elements
change When selection changesApplicable to form elements where value changes and after element loses focus
click, doubleclick (dblclick)Clicking or double clicking (two clicks in rapid succession) with mouseMost page elements
contextmenu Clicking with the right mouse button (bringing up context menu)Web-page document
error When page or image can't loadWeb-page document and image
keydown, keyup, keypress Pressing key or releasing, and act of doing bothWeb-page document and certain form elements
load, unload When image or page is finished loading, or page loses focusWeb-page document and image (load only)
mousedown, mouseup Pressing down on mouse button, releasingMost page elements
mouseover, mouseout Moving mouse over element, moving mouse away from element Most page elements
mousemove Mouse movesMost page elements
reset Form is resetForm
resize Resize of window or frameWindow or frame
select Selecting textForm text area or input
scroll When object is scrolledWindow, frame, or element with overflow set to auto (presence of scrollbar)
submit Form is submittedForm


There are some proprietary events that aren't listed; they'll be covered in the text. Also, up to this point, most of the examples and material we've covered have been cross-browser-safe. By this I mean that most modern browsers (Netscape and IE 4.x and up, or 2002 and later) support what's been covered, and the examples work as detailed in this book. Events are the first topic we'll cover that differs between browsers and browser generations. Not just differdiffer with a vengeance.

Event handling in JavaScript has gone through more than one generation, as well as undergoing proprietary extensions. Many older iterations are still supported for reasons of backward compatibility, and many of the newer event models are not universally implemented across all popular browsers.

In this section, we'll start by looking at event systems from oldest to newest. At the end of each, browser compatibilities and quirky behaviors are listed.




Learning JavaScript
Learning JavaScript, 2nd Edition
ISBN: 0596521871
EAN: 2147483647
Year: 2006
Pages: 151

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net