This tutorial focuses on:
- Event handlers
- Where to place event handlers
- Executing code with event handlers
- onmouseover - Is used when the mouse cursor is moved over an object.
- onmouseout - Is used when the mouse cursor is moved off an object.
- onload - Is used when an object has finished loading.
- onclick - Is used when an object is clicked.
- onfocus - Is used when an object is made active.
- onselect - Is used when the contents of an object are selected.
Where to place event handlers
Event handlers are placed inside HTML tags. You would place the appropriate event handler in the HTML tag that corresponds to the object you wish to effect. For example, you would place the onload event handler in the <body> tag for something to happen when a page has finished loading, or the onmouseout event handler in the <img> tag for something to happen when the mouse cursor is moved over an image.
Executing code with event handlers
Event handlers by themselves can not do anything. Some code has to be called for an event handler to execute. You can set event handlers to execute one or two or more individual lines of code or entire functions. When an event handler detects a particular event, it will execute the specified code or function.
In the above examle, a button uses the onclick event handler to display a message in an alert box, and a textbox calls the function showMessage() when it is made active using the onfocus event handler.