The web browser keeps track of how the user interacts with the web page through what are known as events. An event is a user initiated activity, for example; loading or reloading a page, clicking on a button, hyperlink or inside of a text field in a form, placing the mouse over an image, and removing the cursor from an image. JavaScript provides a way for us to respond to these user actions (and others) through what are known as event handlers.
Event handlers are each associated with a corresponding HTML tag or set of tags and are placed inside of these tags as attributes. The event handler is the keyword and the JavaScript statements to execute are the value.
Unfortuntately, the tags do not always best represent that event in the page, for example, you can click on an image, but you cannot use an onClick event handler inside of an <IMG SRC> tag. Instead, you must hyperlink the image, and then place the onClick event handler in the <A> tag.
The use of quotes inside of an event handler can be a bit tricky. The JavaScript code that you want to execute is placed on the right of the equals sign, and must always be enclosed within a set of double quotes. The double quotes, in this instance, have a special meaning; they are used to identify the script to the web browser. As a result, double quotes cannot be used within any statement contained inside of an event handler. Instead, you must use single quotes in places where you would ordinarily use double quotes.
An event handler is the keyword (i.e. to the left of the equals sign inside of the tag). As a result, it is considered to be HTML, and is not case sensitive. It is customary, though, to use the interCap method to make it easier to identify the them when editing. The value of the event handler, i.e. the JavaScript code that you want to execute is placed on the right side of the equals sign, and must always be enclosed within a set of double quotes. The event handler keyword is not case sensitive, however, the JavaScript statements, as always, are case sensitive.
Event handlers present a second way in which to insert a script. When you use an event handler to initiate a script, you do not need to identify the script to the browser with a set of <SCRIPT> tags.
Event handlers present a second way in which to cause a script to execute. In our previous examples and exercises, scripts have run automatically and immediately as the page is loaded. Event Handlers provide a bit of a control lever: the script will only execute when it is triggered by the event, for example, a mouseover will only occur when the user places the cursor on an image.
There are many, many event handlers available to Netscape and Internet Explorer. However, there are only twelve event handlers that are shared by Netscape 3 and greater and Internet Explorer 4 and greater for both Mac and PC. They are listed below.
|
Buttons and Hyperlinks |
|||||
| event handler | event | examples | tags | notes | utility |
| onClick | user clicks on a form button or hyperlink | example | <A> <INPUT TYPE="button"> |
for hyperlinks, onClick will execute before the user is taken to the URL specified in the HREF attribute. Instead of using onClick in a hyperlink, you can also override the HREF attribute by giving it a value of "javascript:statement", where statement is any valid JavaScript statement. | very useful |
| onMouseOver | user places the cursor on a hyperlink | example | <A> | This is the first part of a rollover. | very useful |
| onMouseOut | user removes the cursor from a hyperlink | example | <A> | This is the second part of a rollover. | very useful |
|
Image and Page Loading |
|||||
| event handler | event | examples | tags | notes | utility |
| onLoad | when a page or image has completely loaded | example | <BODY> <IMG> |
Statements in the onLoad event handler will be executed after any scripts that are loaded in the <HEAD< section of the page. When you place scripts in the head section of the document, they will run as soon as they encountered in the code, i.e. before content is loaded. This event handler is useful when you want to be sure that the content has loaded before executing scripts, for example, a cycling banner ad shouldn't begin until after the image has loaded. | somewhat useful |
| onUnload | when the user leaves the page for any of the following reasons: follows a hyperlink, goes back or forward in the history/go menu, closes the window, or quits the browser. | example | <BODY> | This event handler is exploited by webmasters who want to control a user's visit to their site. You can use unLoad to detect when a user is trying to exit your site and redirect them back to it - very, very annoying. It is really meant as a tool to allow you to do any necessary clean-up when a user leaves your site unexpectedly, perhaps before they have finished completely filling-in a form. You could then store that information in a cookie so that it is there if they should return to complete at some not too distant time in the future. | not very useful |
| onAbort | user chooses to stop loading an image | example | <IMG> | It is rare that you would want to detect for this event. | rarely used |
|
Forms (and windows) |
|||||
| event handler | event | examples | tags | notes | utility |
| onFocus | user places the cursor inside of a text field or brings a window to the foreground | example | <INPUT TYPE="text"> <INPUT TYPE="password"> <TEXTAREA> |
for windows, onFocus means to bring the window to the foreground, i.e. above any other windows that are open. It is meaningless as an event when only one window is currently open. | very useful |
| onBlur | user removes the cursor from a text field or moves a window to the background | example | <INPUT TYPE="text"> <INPUT TYPE="password"> <TEXTAREA> |
onBlur is the opposite of onFocus. | rarely used |
| onSelect | user selects text in a form text field | example | <INPUT TYPE="text"> <INPUT TYPE="password"> <TEXTAREA> |
very buggy inside of the textarea box. onSelect is also triggered during the onFocus event in some browsers. | very useful |
| onChange | user changes text or a menu item | example | <INPUT TYPE="text"> <INPUT TYPE="password"> <TEXTAREA> <SELECT> |
onChange is tricky with text boxes. It does not react immediately to change. It will not recognize that a change has occured until focus is removed from the text box. | very useful |
| onSubmit | user submits a form | example | <FORM> | usually this event is triggered when a user clicks on the submit button, but know that there are other ways to submit a form. This event handler is triggered when the form is submitted in any manner. | rarely used |
Errors |
|||||
| event handler | event | examples | tags | notes | utility |
| onError | when a script encounters an error | example | not associated with any tag, placed in the <HEAD> section of the document | This is generally used for debugging purposes or to suppress error messages that are generated even when the script is working correctly and due to bugs in JavaScript on certain browsers.JavaScript allows you to override the default response to an error or turn off the response all together. | rarely used |