Java Reference
In-Depth Information
The other piece of code in the script block is the definition of the function
myButtonClick()
. This
function handles the
<input/>
element's
click
event:
myButton.addEventListener("click", myButtonClick);
This element is for a
Button
element called
myButton
and is contained within a form called
form1
:
<form action="" name="form1">
<input type="button" name="myButton" value="Button clicked 0 times" />
</form>
Let's look at the
myButtonClick()
function a little more closely. First, the function increments the value
of the variable
numberOfClicks
by one:
function myButtonClick() {
numberOfClicks++;
Next, you update the text on the button face using the
Button
object's
value
property:
myButton.value = "Button clicked " + numberOfClicks + " times";
}
The function in this example is specific to this form and button, rather than a generic function you'll
use in other situations. Therefore, the code in this example directly refers to a button using the
myButton variable
.
mouseup and mousedown events
trY it out
Two less commonly used events supported by the
Button
object are the
mousedown
and
mouseup
events. You can see these two events in action in the next example.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chapter 11: Example 3</title>
</head>
<body>
<form action="" name="form1">
<input type="button" name="myButton" value="Mouse goes up" />
</form>
<script>
var myButton = document.form1.myButton;
function myButtonMouseup() {
myButton.value = "Mouse Goes Up";
}
function myButtonMousedown() {
