Understanding Events


In the world of JavaScript, events occur when something happens in the browser window, usually initiated by the visitor. One example is when the visitor moves the mouse pointer over a link; this action generates a mouseover event.

Events can also occur when the browser does something, such as loading a new document (load) or leaving a Web page (unload).

An event handlerwhich is the event name with the word on at the beginning (for example, onload)allows you to define what should happen when a particular event is detected for a particular object (Figure 12.4).

Figure 12.4. An event handler.


Table 12.3 lists some of the more common event handlers that you'll be using and what elements they can be used with. To see all these events on a single page, visit webbedenvironments.com/dhtml/event-handlers/, a page I set up to demonstrate how the event handlers work (Figure 12.5).

Table 12.3. Event Handlers

EVENT HANDLER

WHEN IT HAPPENS

ELEMENTS AFFECTED

onload

After an object is loaded

Documents and images

onunload

After the object is no longer loaded

Documents and images

onfocus

When an element is selected

Documents and forms

onblur

When an element is deselected

Documents and forms

onmouseover

When the mouse pointer passes over an area

Links and image map areas

onmouseout

When the mouse pointer passes out of an area

All

onclick

When an area is clicked in

All

onmousedown

While the mouse button is depressed

All

onmouseup

When the mouse button is released

All

onmousemove

As the mouse is moved

Document

onkeydown

While a keyboard key is down

Forms

onkeyup

When a keyboard key is released

Forms

onkeypress

When a keyboard key is down and immediately released

Forms

onresize

When the browser window or a frame is resized

Document

onmove*

When the browser window is moved

Document

***Not supported by IE4/5 or Netscape 6


Figure 12.5. This Web page contains examples of all the events discussed in this chapter, so that you can see them in action.


Events and the DOM

If you've used any type of scripting language in an HTML page, you've more than likely seen a DOM in action. The DOM works by targeting an element on the screen and providing the path a JavaScript function can use to address the element in response to an event triggered by an action in the browser window (Figure 12.6).

Figure 12.6. This example's process begins with the visitor's action (the mouseover) and ends with the browser's reaction (changing the graphic). In between, the browser senses the action (event), triggers a function, and uses DOM to change the image's source to a different graphic file.


Tips

  • Although the href acts like an onclick event handler, it isn't one, and DHTML code may not run if it's activated using href="javascript:"

  • The event handler can call JavaScript functions, or you can include JavaScript statements directly in the event handler.

  • Most changes made in an object's styles with the DOM should be triggered by an event handler. At times, in fact, the JavaScript must be triggered by an event to work. I've wasted many, many hours trying to figure out what was wrong with my JavaScript, only to find that I had simply forgotten to trigger the script from an event.

  • At first glance, onclick and onmouseup may seem to do the same thing. The click event, however, occurs only after the mouse button has been pressed and released. Both mousedown and mouseup break this action into two separate events, each of which can have a different action associated with it.





CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

Similar book on Amazon

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