Java Reference
In-Depth Information
figure 11-6
You'll register event listeners for the
textarea1
and
button1
elements in your JavaScript code. But
first, you need to retrieve those element objects from the document. You do this very simply by using
the form hierarchy:
var myForm = document.form1;
var textArea1 = myForm.textarea1;
var textArea2 = myForm.textarea2;
var btnClear = myForm.button1;
You start by creating the
myForm
variable to contain the
<form/>
element object, and then you use that
variable to retrieve the other form elements. Now that you have the element objects, registering event
listeners is as easy as calling the
addEventListener()
method:
textArea1.addEventListener("change", displayEvent);
textArea1.addEventListener("keydown", displayEvent);
textArea1.addEventListener("keypress", displayEvent);
textArea1.addEventListener("keyup", displayEvent);
btnClear.addEventListener("click", clearEventLog);
On the first
<textarea/>
element (
textArea1
), you listen for the
change
,
keydown
,
keypress
, and
keyup
events, using the
displayEvent()
function as the handling function. For the button, you listen
for the
click
event with the
clearEventLog()
function.
The latter function is the simplest, so let's look at that first:
function clearEventLog(e) {
textArea2.value = "";
}
