Try It Out: Event Watching - Page 12
September 28, 2001
To help demonstrate how the onkeydown, onkeypress, onkeyup, and
onchange events work, in particular the order in which they fire,
let's create an example that tells us what events are firing:
<HTML>
<HEAD>
<SCRIPT
LANGUAGE=JavaScript>
function
DisplayEvent(eventName)
{
var myMessage = window.document.form1.textarea2.value;
myMessage = myMessage + eventName;
window.document.form1.textarea2.value = myMessage;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM 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="window.document.form1.textarea2.value=''">
</FORM>
</BODY>
</HTML>
Save this page as ch6_examp5.htm.
Load the page into your browser and see what happens when you
type any letter into the first textarea box. You should see the
events being fired listed in the second textarea box (onkeydown,
onkeypress, onkeyup). If you click outside of the first textarea
box you'll see the onchange event fire.
Experiment with the example to see what events fire, and when.
Sometimes you will not get quite the results you expect. For
example, if you press and hold a key down then in IE and NN 6
onkeydown and onkeypress will fire continuously until you let go,
when just one onkeyup event will fire. In NN 4.x, onkeydown will
fire once, then onkeypress will fire continuously until you let
go,
when just one onkeyup will fire.
How It Works
Within a form called form1 in the body of the page, we define two
textareas and a button. The first textarea is the one whose
events we are going to monitor. We attach code which calls the
DisplayEvent() function to each of the onchange, onkeydown,
onkeypress, and onkeyup event handlers. The value passed to the
function reflects the name of the event firing.
<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>
Next we have an empty textarea, the same size as the first
textarea.
<TEXTAREA ROWS=15 COLS=40 NAME=textarea2>
</TEXTAREA>
Finally we have our button element:
<INPUT TYPE="button" VALUE="Clear Event TextArea"
NAME=button1 onclick="window.document.form1.textarea2.value=''">
Notice that the onclick event handler for the button is not
calling a function, but just executing a line of JavaScript.
Although we do normally call functions it's not compulsory; if we
have just one line of code to execute, it's easier just to insert
that rather than create a function and call it. In this case, the
onclick event handler is connected to some code that sets the
contents of the second textarea to empty ('').
Now let's look at the DisplayEvent() function. This is defined in
a script block in the head of the page. It adds the name of the
event that it has been passed as a parameter to the text already
contained in the second textarea:
function DisplayEvent(eventName)
{
var myMessage = window.document.form1.textarea2.value;
myMessage = myMessage + eventName;
window.document.form1.textarea2.value = myMessage;
}
The Password Text Box - Page 11
Beginning JavaScript
Checkboxes and Radio Buttons - Page 13
|
