Multiple Event Handlers for ONCLICK and ONDBCLICK

On this page: Test 1 | Test 2 | Test 3 | References | About these tests

Nearby: More HTML 4.01 Tests | UAAG 1.0 Test Suite

UAAG 1.0 Requirement

Checkpoint 1.2 Activate event handlers (Priority 1 ): Provision 2 : In order to satisfy provision one of this checkpoint, the user must be able to activate as a group all event handlers of the same input device event type. For example, if there are 10 handlers associated with the onmousedown event type, the user must be able to activate the entire group of 10 through keyboard input alone, and must not be required to activate each handler separately.

Test 1 :

Procedure

Using the keyboard or an assistive technology that emulates the keyboard, navigate to either image and activate both ONCLICK events and both ONDBLCLICK events to change the color of both stars.

Run test

Expected results

Both images change to a red star on single-click keyboard command
Both images change to a pink star on double-click keyboard command

Source code

<table border="1" summary="Table to test two event handlers associated with onclick and ondblclick events">
  <tr>
    <td rowspan="1" colspan="1">
      <img id="star1" ondblclick="imgChange('../images/starPink.gif'); imgChange2('../images/starPink.gif')" onclick="imgChange('../images/starRed.gif'); imgChange2('../images/starRed.gif')" src="../images/starYel.gif" width="35" height="35" alt="star" border="0" name="star1"></img>
    </td>
    <td rowspan="1" colspan="1">
      <img id="star2" ondblclick="imgChange('../images/starPink.gif'); imgChange2('../images/starPink.gif')" onclick="imgChange('../images/starRed.gif'); imgChange2('../images/starRed.gif')" src="../images/starYel.gif" width="35" height="35" alt="star" border="0" name="star2"></img>
    </td>
  </tr>
</table>

Test Script Code

					function imgChange( img ) 
					{
   					document.star1.src = img
					}
					function imgChange2( img ) 
					{
   					document.star2.src = img
					}									
			

Test 2 :

Procedure

Using the keyboard or an assistive technology that emulates the keyboard, navigate to the text input box.
Using the keyboard or an assistive technology that emulates the keyboard, clear the text input box and change the input box background color with ONCLICK.

Run test

Expected results

Text in input box is cleared
The background color of the input box changes

Source code

<form action="../action/return.html" method="get" enctype="application/x-www-form-urlencoded" name="form1">
  <input type="text" style="background-color: #ffffff;" onclick="clearText(this); changeInColor(this)" value="Click here to clear text" name="text1"></input>
</form>

Test Script Code

					function clearText(thefield)
					{
						if (thefield.defaultValue == thefield.value)
										thefield.value = ""
      				else 
							thefield.value = thefield.defaultValue
					}
					function changeInColor(thefield) 
					{
						if (thefield.defaultValue == thefield.value)
						 	document.form1.text1.style.background= "#ffffff"
						else
						 	document.form1.text1.style.background= "#ffcccc"
					}							 						
			

Test 3 :

Procedure

Using the keyboard or an assistive technology that emulates the keyboard, navigate to the text input box.
Using the keyboard or an assistive technology that emulates the keyboard, activate both ONDBCLICK functions associated with the text input box.

Run test

Expected results

The text "Passes the Test" appears in the text box upon double-click
The background color of the text input box changes color upon double-click

Source code

<form action="../action/return.html" method="get" enctype="application/x-www-form-urlencoded" name="form2">
  <label for="text2">Double-click on the text box to activate the event handlers: </label>
  <input type="text" id="text2" name="text2" style="background-color: #ffffff;" ondblclick="showText(this); changeInColor2(this)"></input>
</form>

Test Script Code

					function showText(thefield)
					{
						if (thefield.defaultValue == thefield.value)
								thefield.value = "Passed the test"
      				else
           					thefield.value = ""
					}
					function changeInColor2(thefield) 
					{
						if (thefield.defaultValue == thefield.value)
						 		document.form2.text2.style.background= "#ffffff"
						else
						 		document.form2.text2.style.background= "#ffcccc"
					}					 									
			

References

About this test suite

This test is part of a test suite for the User Agent Accessibility Guidelines (UAAG) 1.0 . This work is conducted by the User Agent Accessibility Guidelines Working Group , which is part of W3C's Web Accessibility Initiative (WAI) . Please send comments on this test to w3c-wai-ua@w3.org ( public archive ).

Test created by:

Colin Koteles
Dominique Kilman

Last modified: $Date: 2003/04/02 23:46:28 $ by $Author: jongund $