Event Handlers Examples

Here are some examples and sample pages of several events.
You should build web pages using the sample code.

1. onunload event handler example

A friendlier use of the onUnload event handler

<body onunload="alert('Thank you. Yah all come back now')">

2 onblur event handler example

Build a page with a User Name textbox.
Write the code that thanks the user when they fill in and exit the textbox.
(This code does not work in Netscape browsers earlier than version 6).
User Name

<head>
<script type='text/javascript'>
function taa(){
if (document.forms[0].elements[0].value !="")
{alert('Thankyou for your Input');}
else {alert('the textbox is empty, Try again !');}
}
</script>
</head>

3. Read Only Text Field using Events

A Read only Text box

4. Creating a link to go nowhere

Some objects, such as images, don't support the onclick event.
We can get around this by creating a false link to wrap around the image.
This allows us to execute some javascript when the image is clicked.
However we don't want the link itself to work so we must neutralise it.
There are two main methods
<a href='javascript:void(0);' onclick='do this stuff instead' > -this one is the more formal way
<a href='#' onclick='do this stuff instead'> -this one is quicker.

5. An irritatingly friendly form that demonstrates several events

over the top an irritatingly friendly form page demonstrating on blur, onsubmit, onfocus, onreset

6. Using the mouseover event on an image map.

Colour Me mouseovers do not work on all browsers for images but do work for image maps.

7. Click the button for an instant pass in Internet 1.

Instant Internet 1 Pass

8. onunload gone mad - abandon all hope ye who enter here !
(You will need to turn the popup blocker off to see this effect).
Warning - this example will probably require you to shutdown your computer,
make sure you save your work before trying,

The Mongrel Web page