Java Reference
In-Depth Information
<textarea rows="15" cols="40" name="textarea1"></textarea>
<textarea rows="15" cols="40" name="textarea2"></textarea>
<br />
<input type="button" value="Clear event textarea" name="button1" />
</form>
<script>
var myForm = document.form1;
var textArea1 = myForm.textarea1;
var textArea2 = myForm.textarea2;
var btnClear = myForm.button1;
function displayEvent(e) {
var message = textArea2.value;
message = message + e.type + "\n";
textArea2.value = message;
}
function clearEventLog(e) {
textArea2.value = "";
}
textArea1.addEventListener("change", displayEvent);
textArea1.addEventListener("keydown", displayEvent);
textArea1.addEventListener("keypress", displayEvent);
textArea1.addEventListener("keyup", displayEvent);
btnClear.addEventListener("click", clearEventLog);
</script>
</body>
</html>
Save this page as
ch11 _ example5.html
. Load the page into your browser, and see what happens when
you type any letter into the first text area box. You should see the events being fired listed in the second
text area box (
keydown
,
keypress
, and
keyup
), as shown in Figure 11-6. When you click outside the
first text area box, you'll see the
change
event fire.
Experiment with the example to see what events fire and when.
Within a form called
form1
in the body of the page, you define two text areas and a button. The first
text area is the one whose events you are going to monitor:
<form action="" name="form1">
<textarea rows="15" cols="40" name="textarea1"></textarea>
Next, you have an empty text area the same size as the first:
<textarea rows="15" cols="40" name="textarea2"></textarea>
Finally, you have your button:
<input type="button" value="Clear event textarea" name="button1" />
</form>
