Java Reference
In-Depth Information
Try It Out Event Watching
To help demonstrate how the keydown , keypress , keyup , and change events work (in particular, the
order in which they fi re), you'll create an example that tells you what events are fi ring.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Chapter 7: Example 5</title>
<script type=”text/javascript”>
function DisplayEvent(eventName)
{
var myMessage = window.document.form1.textarea2.value;
myMessage = myMessage + eventName;
document.form1.textarea2.value = myMessage;
}
</script>
</head>
<body>
<form action=”“ name=”form1”>
<textarea rows=”15” cols=”40” name=”textarea1”
onchange=”DisplayEvent('onchange\n');”
onkeydown=”DisplayEvent('onkeydown\n');”
onkeypress=”DisplayEvent('onkeypress\n');”
onkeyup=”DisplayEvent('onkeyup\n\n');”></textarea>
<textarea rows=”15” cols=”40” name=”textarea2”></textarea>
<br />
<br />
<input type=”button” value=”Clear Event TextArea” name=”button1”
onclick=”document.form1.textarea2.value=''“ />
</form>
</body>
</html>
Save this page as ch7_examp5.htm. Load the page into your browser and see what happens when you
type any letter into the fi rst text area box. You should see the events being fi red listed in the second text
area box (onkeydown, onkeypress, and onkeyup), as shown in Figure 7-6. When you click outside the
fi rst text area box, you'll see the onchange event fi re.
Experiment with the example to see what events fi re and when.
Within a form called form1 in the body of the page, you defi ne two text areas and a button. The fi rst text
area is the one whose events you are going to monitor. You attach code that calls the displayEvent()
function to each of the onchange, onkeydown, onkeypress, and onkeyup event handlers. The value
passed to the function refl ects the name of the event fi ring.
<textarea rows=”15” cols=”40” name=”textarea1”
onchange=”DisplayEvent('onchange\n');”
onkeydown=”DisplayEvent('onkeydown\n');”
onkeypress=”DisplayEvent('onkeypress\n');”
onkeyup=”DisplayEvent('onkeyup\n\n');”></textarea>
Search WWH ::




Custom Search