Event handlers are special JavaScript based attributes. Essentially they sit, like any other attribute, within a tag but when an event happens they trigger a JavaScript command(if you are unsure read our JavaScript tutorial first)
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 straight forward link that just links this page (ie. reloads it). to reload page 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 to do this use the following Create a link as normal but hit Extended (5) In the extended attributes box click add Enter the following In the name box enter onMouseOver In the value box enter window.status='go back to menu'; return true Then add another set In the name box enter onMouseOut In the value box add window.status=' '; return true 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 it - the message often won't disappear and will only be temporarily replaced by other link status info) In simple HTML this reads as follows <a href="event.htm" onMouseOver="window.status='go back to menu'; return true" onMouseOut="window.status=' '; return true"> back to menu</a> As you can see the event handles are just attributes in the <a> tag which controls hyperlinks 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 Now the message that appears is coded as follows In the name box enter onClick In the value box enter ('Warning Page Reloading') The HTML is as follows
<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 discuss this more in a cool tip article) |