Books
in black and white
Main menu
Share a book About us Home
Books
Biology Business Chemistry Computers Culture Economics Fiction Games Guide History Management Mathematical Medicine Mental Fitnes Physics Psychology Scince Sport Technics
Ads

Javascript for dummies 4th edition - Veer E.V

Veer E.V Javascript for dummies 4th edition - Wiley publishing , 2004. - 387 p.
ISBN: 0-7645-7659-3
Download (direct link): javascriptfordummies2005.pdf
Previous << 1 .. 77 78 79 80 81 82 < 83 > 84 85 86 87 88 89 .. 118 >> Next

onMove window (frame) The user moves or resizes the window or frame.
onReset form The form is reset; either the user clicks a Reset button, or the programmer invokes the form.reset() method.
onResize window (frame) The user resizes the window or frame.
onSubmit form The form is submitted; either the user clicks a Submit button, or the programmer invokes the form.submit() method.
onUnload window The user unloads a document (by closing the browser or by loading another document).
Many programmers find four categories of event handlers to be the most useful: window-related events, mouse-related events, form-related events, and key-related events. In the following four sections, I show you examples of each of these four important event categories.
Chapter 13: Handling User-Initiated Events 243
The Event's the thing
Both Navigator and Internet Explorer support the concept of an Event object designed for advanced event-handling scenarios. In theory, you can use the Event object to capture and examine nitty-gritty details about an event that occurs. For example, if a user clicks a mouse button, you can use the methods and properties associated with the Event object to determine which mouse button the user clicks and even the coordinates of the pointer at the time of the click. If a user presses a key, you can use the methods and properties associated with the
Event object to determine which key (or key combination) your visitor presses. The possibilities are numerous. However, JavaScript support for the Event object isn't consistent between browsers at the time of this writing — and documentation for Navigator support is virtually nonexistent. For more information on the Event object and how it's implemented in Internet Explorer, visit
http://msdn.microsoft.com/workshop/
author/dhtml/reference/objects/obj_
event.asp
Window events
One window event that most Web surfers are familiar with is the pop-up advertisement — a tiny (or not-so-tiny) window that appears automatically when you load certain Web pages into your browser. Pop-up ads are attached to the onLoad event handler (and sometimes the onUnload event handler, too, which can pelt you with additional pop-up ads as you try to surf away from a site).
In addition to the onLoad and onUnload event handlers, windows — and frames, which are a special type of window — support event handlers including onBlur, onFocus, onMove, and onResize, as Table 13-2 describes.
Table 13-2 Window- and Frame-Related Event Handlers
Event Handler Event (Event Handler Triggered When...)
onBlur The element loses input focus. (Clicking out of or tabbing away from an element takes away that element's input focus.)
onFocus The element gains input focus.
onLoad The element loads successfully.
onMove The user moves or resizes the window or frame.
onResize The user resizes the window or frame.
onUnload The user unloads a document (by closing the browser or by loading another document).
244 Part IV: Interacting with Users
You trigger JavaScript code for a window event by defining a value for the window’s event handler. For example, the following code displays a goodbye message when a user unloads (closes or surfs away from) a Web page.
<BODY onUnload=”alert('Goodbye, and thank you for stopping by my Web site');'')
Mouse events
Mouse events make cool interactive effects such as rollovers (see Chapter 8) and tooltips (see Chapter 11) possible. No such object as mouse exists. Rather, mouse events occur when a mouse pointer moves — or is clicked — over some other object. For example, the following code ties two functions
(displayToolTip() and hideToolTip()) to the onMouseOver and onMouseOut event handlers associated with an HTML-defined area.
<MAP name=”PicMap” id=”PicMap”>
<AREA SHAPE=”rect” COORDS=”226,25,303,82” HREF=”#” onMouseOut=”hideTooltip('tooltip4')” onMouseOver=”displayTooltip(event,'tooltip4')”/>
Table 13-3 describes additional mouse events — and the objects and event handlers associated with those events.
Table 13-3 Mouse-Related Event Handlers
Event Handler Supporting Objects Event (Event Handler Triggered When...)
onMouseDown Button, Checkbox, document, FileUpload, Image (and Area), Link, Password, Radio, Reset, Select, Submit, Text, Textarea The user presses a mouse button (but doesn't release it).
onMouseOut Image (and Area), Link The mouse moves off the element.
onMouseOver Image (and Area), Link The mouse moves onto the element.
onMouseUp Button, Checkbox, document, FileUpload, Image (and Area, Link, Password, Radio, Reset, Select, Submit, Text, Textarea The user releases a previously clicked mouse button.
Chapter 13: Handling User-Initiated Events 245
Form events
HTML defines a handful of form elements, or controls (push buttons, radio buttons, check boxes, and so on). Each of these elements is associated with appropriate event handlers.
For example, in the life of a button, several events can occur. That button can be clicked, double-clicked, receive input focus, and lose input focus, for example. JavaScript event handlers can detect and handle each of these separate events — click, double-click, focus, and blur. Take a look at the following code to see what I mean:
Previous << 1 .. 77 78 79 80 81 82 < 83 > 84 85 86 87 88 89 .. 118 >> Next