Java Reference
In-Depth Information
function myButton_onmouseup()
{
document.form1.myButton.value = “Mouse Goes Up”
}
function myButton_onmousedown()
{
document.form1.myButton.value = “Mouse Goes Down”
}
</script>
</head>
<body>
<form action=”“ name=”form1”>
<input type=”button” name=”myButton” value=”Mouse Goes Up”
onmouseup=”myButton_onmouseup()“
onmousedown=”myButton_onmousedown()“ />
</form>
</body>
</html>
Save this page as
ch7_examp3.htm
and load it into your browser. If you click the button with your left
mouse button and keep it held down, you'll see the text on the button change to “Mouse Goes Down.”
As soon as you release the button, the text changes to “Mouse Goes Up.”
In the body of the page, you defi ne a button called myButton within a form called form1; you attach
the function myButton_onmouseup() to the onmouseup event handler, and the function myButton_
onmousedown() to the onmousedown event handler.
<form action=”“ name=”form1”>
<input type=”button” name=”myButton” value=”Mouse Goes Up”
onmouseup=”myButton_onmouseup()“
onmousedown=”myButton_onmousedown()“ />
</form>
The
myButton_onmouseup()
and
myButton_onmousedown()
functions are defi ned in a script block
in the head of the page. Each function consists of just a single line of code, in which you use the
value
property of the
Button
object to change the text that is displayed on the button's face.
An important point to note is that events like mouseup and mousedown are triggered only when the
mouse pointer is actually over the element in question. For example, if you click and hold down the
mouse button over your button, then move the mouse away from the button before releasing the
mouse button, you'll fi nd that the mouseup event does not fi re and the text on the button's face does not
change. In this instance it would be the document object's onmouseup event handler code that would
fi re, if you'd connected any code to it.
Don't forget that, like all form element objects, the
Button
object also has the
onfocus
and
onblur
events, though they are rarely used in the context of buttons.
Two additional button types are the Submit and Reset buttons. You defi ne these buttons just as you do a
standard button, except that the
type
attribute of the
<input>
tag is set to
submit
or
reset
rather than
to
button
. For example, the Submit and Reset buttons in Figure 7-4 were created using the following code:
<input type=”submit” value=”Submit” name=”submit1” />
<input type=”reset” value=”Reset” name=”reset1” />
