Work with Events and Event Handlers

By now you’re either very excited about JavaScript or thoroughly intimidated by it. Realistically, not everyone finds programming an easy thing to do. Fortunately, a number of the more impressive things JavaScript can do are also some of the easier things to accomplish.

Earlier in this chapter you read about events and event handlers. To refresh your memory, an event is something that happens on your visitor’s browser, generally in response to an action the visitor has taken (for example, loading a page, unloading it, clicking on something, and so on). An event handler is a JavaScript statement that is triggered by a particular event. Table 15-1 lists some of the most commonly used event handlers and the events that trigger them.

Table 15-1: Some Events and Event Handlers


Event Handler

Visitor stops a page that is loading.


Visitor tabs out of a form field.


Visitor tabs into a form field.


A page loads into the browser.


Mouse cursor moves over a part of the page.


Mouse cursor moves away from a button or other part
of the page.


Visitor clicks the Submit button.


Visitor clicks the Reset button.


Visitor holds the mouse button down.


Visitor releases the mouse button.


Visitor clicks on part of your page.


Experiment with Event Handlers

Event handlers enable you to create a page that responds to the actions of your visitor. Whether it is through mouseovers, keypresses, or simple clicks, you can use event handlers to create a responsive environment on your Web site. The best part about event handlers, though, is that they are easy to use.

Create a “Ticklish” Button

To see how easy it is to use event handlers (and to have some fun doing it), try creating a “ticklish” button. This little JavaScript effect demonstrates how you can make a page change dynamically in response to a visitor’s actions. The effect begins by displaying a button that says “Click for a surprise.” When you move a mouse over the button, it triggers the onMouseOver event handler and the button changes to read “That Tickles!” If you move the mouse off the button, the onMouseOut event handler changes the button to read “Come Back.” Then, if you hold the button down, it triggers the onMouseDown event handler, which alters the button to read “Ready for the surprise?” Finally, when you release the button, it disappears and the word “Surprise!” appears in its place.

The code for the ticklish button is reproduced in the following listing. As you type it in, note that you do not use the <script> element. Often event handlers are placed right inside an HTML element, as in the code here. For the ticklish button, all the event handlers are in the same <input /> element.

<head>    <title>The Ticklish Button</title>    <style>  body {background-color: white; color:navy}     </style> </head> <body>      <div align="center">    <h1>The Ticklish Button</h1>    <form>       <table border="1"><tr><td> <input type="button" value="Click for a surprise."    onMouseOver = "value='That tickles!'";     onMouseOut = "value='Come back!!!'";    onMouseDown = "value='Ready for the surprise?'";    onMouseUp = "document.write('<h1>SURPRISE</h1>')"; />       </td></tr></table>    </form>    </div> </body> 

When you have typed the code, save it as ticklish.htm and open it in your browser. The opening screen will resemble the following illustration. However, when you move your mouse over the button and back out, the button should respond to your movements.

Create a Rollover

A more practical use of event handlers is with mouse rollovers for navigation buttons. To create a simple rollover effect, you must create two buttons that are nearly identical. For this illustration, two buttons, hibuttonoff.gif and hibutton.gif, differ only in the color of the text, as is shown in the following illustration:

These two buttons will be used to create your rollover. To try this for yourself, open template.htm and save it as hibutton.htm. Then follow these steps to use the onMouseOver and onMouseOut event handlers:

  1. Create a simple image link using the hibuttonoff.gif image.

    <a href="falselink.htm"><img src="/books/4/238/1/html/2/hibuttonoff.gif" /></a>
  2. Add the name=" " attribute to the image element to assign a name to the image. For this exercise, the name will be "hiThere".

    <a href"=falselink.htm"><img src="/books/4/238/1/html/2/hibuttonoff.gif"        /></a>
  3. Modify the anchor <a> </a> element to add the onMouseOut event handler. The event handler will refer to the name that you assigned to the image (hiThere).

    <a href="falselink.htm" onMouseOut="hiThere.src='/books/4/238/1/html/2/hibuttonoff.gif'"> <img src="/books/4/238/1/html/2/hibuttonoff.gif"  /></a> 
  4. Add the onMouseOver event handler to the <a> element.

    <a href="falselink.htm" onMouseOut="hiThere.src='/books/4/238/1/html/2/hibuttonoff.gif'" onMouseOver="hiThere.src='/books/4/238/1/html/2/hibuttonon.gif'"> <img src="/books/4/238/1/html/2/hibuttonoff.gif"  /></a>

    Save the code and display it in your browser. Your complete page should resemble the illustration that follows:

    <body> <a href="falselink.htm"    onMouseOut="hiThere.src='/books/4/238/1/html/2/hibuttonoff.gif'"    onMouseOver="hiThere.src='/books/4/238/1/html/2/hibuttonon.gif'"> <img src="/books/4/238/1/html/2/hibuttonoff.gif" /></a> </body>

How to Do Everything with HTML & XHTML
How to Do Everything with HTML & XHTML
ISBN: 0072231297
EAN: 2147483647
Year: 2003
Pages: 126 © 2008-2017.
If you may any questions please contact us: