Skip to main content

Scripts using event handlers

Web checkpoint 5




Event handlers accompany HTML code and are triggered by a browser or user event - such as when the page loads, when the user clicks the mouse, or when the time is 8 p.m. Some event handlers are dependent upon use of a mouse or keyboard. These are called device-dependent event handlers, and include onmouseover, onmouseout, and ondblclick. Using device-dependent event handlers may cause the content to be inaccessible to someone who cannot use the device that is required for that specific event handler.

Other event handlers are device-independent and are triggered by both the mouse and keyboard or by other means. Examples of these device-independent event handlers include: onfocus, onblur, and onselect.

The onclick event handler can be either device-dependent, or device-independent, depending on its usage. Refer to the onclick technique below for more information.

For event handlers that do more than just change the presentation of an element, content developers are required at a minimum to use one or more of the following techniques:

Example 1 below below uses onclick as a device-independent link, which is executed when the Enter Key is used to select the element:

Example 1

View this device-independent onclick example

The code for the Example 1 is below:

<a href="webscripts_eventhandlers.html#postexample" onclick="return confirm('Clicking OK will take you to the next paragraph');">View this device-independent onclick example</a>

When the onclick event is used with elements that are not links or form controls, onclick is device-dependent, therefore you must provide a redundant device-independent event handler (onKeyPress) or an equivalent alternative. In order to gain focus on the text, you will need to implement the tabindex attribute. Once that is done, you can use the onkeypress event handler to provide an alternative to onclick. In Example 2 below, the "View this onclick with onKeyPress example" text has the tabindex set, and has both the onclick and onKeyPress event handlers defined.

Example 2

View this onclick with onKeyPress example

The code for the Example 2 is below:

<div tabindex="0" onclick="alert('you clicked. onclick was activated');" onkeypress="if (event.keyCode == 13) { alert('you pressed enter'); }">View this onclick with onKeyPress example</div>

NOTE: Tabindex support is included in most versions of Internet Explorer, but is only supported by Mozilla browsers that are version 1.8 and higher.

One or more of the above techniques are required; the following technique is recommended to enhance accessibility:

Example 3

The code for Example 3 is:

<form name="quickMenu">
<label>Select a page to link to:
<select name="link" onchange="goLink()">
<option value="">Select A Page</option>
<option value=""></option>
<option value="webscripts_eventhandlers.html#dropdown_example3">
Stay on this page</option>
<option value="webscripts.html">Return to Scripts main page</option>
</select>
</label>
</form>

A better technique is to remove the onchange element, and add a "go" button that the user must activate before being re-directed to a new page. Example 4 below uses an associated button with an onclick handler instead of using onchange on the select element.

Example 4

The code for Example 4 is:

<form name="quickMenu">
<label>Select a page to link to:
<select name="link">
<option value="">Select A Page</option>
<option value=""></option>
<option value="webscripts_eventhandlers.html#dropdown_example4">
Stay on this page</option>
<option value="webscripts.html">Scripts main page</option>
</select>
<input type="button" name="Go" value="Go"
onclick="goLink()">

</label>
</form>
Technique summary for scripts using event handlers
Required: Recommended:

For ALL event handlers


onmouseover and onmouseout
ondblclick
onclick
onfocus, onblur, onselect, and onchange

onchange Ensure that there are direct links as an alternative for elements that can only be activated by an event handler.