Try It Out: onmouseup and onmousedown - Page 7
September 21, 2001
Two less commonly used events supported by the Button object in
version 4 or higher browsers are the onmousedown and onmouseup
events. You can see these two events in action in the next
example.
<HTML>
<HEAD>
<SCRIPT LANGUAGE=JavaScript>
function myButton_onmouseup()
{
document.form1.myButton.value = "Mouse Goes Up"
}
function myButton_onmousedown()
{
document.form1.myButton.value = "Mouse Goes Down"
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME=form1>
<INPUT TYPE='button' NAME='myButton' VALUE=' Mouse Goes Up '
onmouseup="myButton_onmouseup()"
onmousedown="myButton_onmousedown()">
</FORM>
</BODY>
</HTML>
Save this page as ch6_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".
How It Works
In the body of the page we define a button called myButton within
a form called form1. Within the attributes of the <INPUT>
tag, we attach the function myButton_onmouseup() to the onmouseup
event handler, and the function myButton_onmousedown() to the
onmousedown event handler.
<FORM 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
defined in a script block in the head of the page. Each function
consists of just a single line of code, in which we 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 onmouseup and
onmousedown only trigger when the mouse pointer is actually over
the element in question. For example if you click and keep held
down the mouse button over our button, then move the mouse away
from the button before releasing the mouse button, you'll find
that the onmouseup event does not fire 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 fire,
if we'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.
The Submit and Reset Buttons
Two additional types of button are the submit and reset buttons.
Defining the submit and reset buttons is done in the same way as
defining a standard button, except that the TYPE attribute of the
<INPUT> tag is set to submit or reset rather than button.
For example, the submit and reset buttons in the earlier
screenshot were created using:
<INPUT TYPE="submit" VALUE="Submit" NAME="submit1">
<INPUT TYPE="reset" VALUE="Reset" NAME="reset1">
These buttons have special purposes, which are not related to
script.
When the submit button is clicked, the form data from the form
that the button is inside gets automatically sent to the server,
without the need for any script.
When the reset button is clicked, all the elements in a form are
cleared and returned to their default values; the values they had
when the page was first loaded.
The submit and reset buttons have corresponding objects called
Submit and Reset, which have exactly the same properties,
methods, and events as a standard Button object.
Button Form Elements - Page 6
Beginning JavaScript
Text Elements - Page 8
|
