to home page

BWRS
SEARCH

HOMETUTORIALSLINKSFORUMGLOSSARYNEWS
 

EVENT HANDLERS

Event Handlers

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

consider this link back to our advanced HTML 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

Essentially it is coded as follows

<a href="advanced.htm"
onMouseOver="window.status='go back to menu';
return true"
onMouseOut="window.status=' ';
return true">
back to menu</a>

Okay now the first and last lines of that HTML are nothing new but there are 2 new attributes in the <a> tag - 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 like this example

To Reload Page

Click Here

Now this is coded as followsback to top

<a href="event.htm"
onClick="('Warning page reloading')">
Click Here</a>

This causes the link to trigger an alert box on clicking (note you need to include the href attribute for this to work on Netscape navigator -this then causes problems) The same code can be used with onMouseOver

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

onClick

see above

onMouseOver

see above

onMouseOut

see above

onDblClick

triggers when mouse double clicked

onMouseDown

triggers when mouse button depressed

onMouseUp

triggers when depressed mouse button released

onKeyDown

triggers when any keyboard key is pressed down

onKeyUp

triggers when a depressed key is released

onKeyPress

triggers when a keyboard key is pressed & released

onLoad

Occurs when the page, frameset or image loads (only usable with <body>, <frameset> &<img>)

 

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

We have special section on controlling how windows appear

 

press for menu

Back to Advanced HTML menu
(watch out for Event Handler)


back to top