JavaScript Resources

The 12 Basic Event Handlers

Events

There are twelve event handlers that are most commonly used. It is a good idea to get familiar with these.

There are some compatibility issues with which tags support which event handlers with some older browsers, but all modern browsers will understand the tags listed in this table,

Buttons and Hyperlinks
event handler event examples tags notes utility
onClick user clicks on a form button or hyperlink example <img>
<div>
<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 mouse cursor on a hyperlink example <img>
<div>
<a>
 This is the first part of a rollover. very useful
onMouseOut user removes the mouse cursor from a hyperlink example <img>
<div>
<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 tactless 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 or pop a new tab or window - 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 or closing a window. 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, or close the window for them automatically. 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 occurred 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