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.
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
}
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"
}
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"
}
-
HTML 4.01 specification for ONCLICK
-
HTML 4.01 specification for ONDBCLICK
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 $
Copyright
© 1999 - 2003
W3C®
(
MIT
,
INRIA
,
Keio
), All Rights Reserved. W3C
liability
,
trademark
,
document use
and
software licensing
rules apply.