Event Handlers

THIS AREA

MAIN

BASICS
Basic Tutorial
Advance Tutorial

Beyond Tips
frames
sound
video
forms
Java &JavaScript
event handlers

Composer Hints
Reviews

 

BWRS
SEARCH

Event handlers are special attributes usable by JavaScript enabled browser. Essentially they sit, like any other attribute, within a tag but when an event happens they trigger a JavaScript command

Now that command can trigger a larger Javascript to run, but more importantly it can be a useful stand alone command

Because they respond to interaction (i.e. events) they allow you to create a more dynamic page

To use these you'll need to get your head round adding HTML with composer

consider this link back to our beyond composer menu page

back to menu

Notice how when you pass your mouse over it in the bottom left (Netscape and Internet Explorer) of your browser window the following message appears "go back to menu" and it disappears when your mouse goes off it

Create a link as normal but select extra HTML.. or Advanced Edit

With older versions of composer just cut and paste the following text into the box that appears

onMouseOver="window.status='go back to menu';
return true"
onMouseOut="window.status=' ';
return true"

With Netscape 6.x composer, again create the link as before.

Click on advanced edit on the linking menu

and select (X) JavaScript events

You'll need to select the appropriate Attribute (Y) from the pull down list and enter it's value

i.e.

You may need to go to the edit HTML option and manually add in all of these lines (for some reason there is atendancy to skip out the return true)

The two event handlers are onMouseOver & onMouseOut.

Not unsurprisingly onMouseOver triggers its JavaScript command when you pass your mouse over the link. This command tells the browser to display the message as a status message in the corner of the screen (window.status)

The onMouseOut attribute (not unsurprisingly) triggers when you move the mouse off the link. It effectively blanks out the last status message (try the code without the 4th and 5th lines (i.e. the onMouseOut attribute - the message often won't disappear and will only be temporarily replaced by other link status info)

Another key event handler is onClick. No prizes for guessing how it works. It is triggered by clicking on something

e.g.

To Reload Page
Click Here

You need to add the following to the link as extra HTML

onClick="alert('Warning Page Reloading')";

if direct editing place it within the link tag (<a>)

e.g.

<a href="index.htm" onClick="alert('Warning Page Reloading')";>

This causes the link to trigger an alert box on clicking (note you need to create a link for this to work) The same code can be used with onMouseOver

There are several event handlers. Here is a list of some that you will see

The onLoad attribute is particularly useful. You can use it to create events that trigger once the page has loaded. Click here to see an example

This creates a new window but of a set size & with no controls

Back to Beyond menu
(watch out for Event Handler)

terms & conditions copyright © 1999-2003 legal notices
home credits contact us link to us

Added 2002 © A.Duncan BWRS