HTML and CSS Reference
In-Depth Information
And be careful with quotes! The handling function must be enclosed within either
double or single quotes. If you have double quotes within the function, surround the
whole thing in single quotes, and if you have single quotes within the function, either
escape the single quote with a backslash, or surround the whole thing in double quotes.
built-in method
-->
onClick=
"window.open('myhome.html', 'newWin')"
user-defined function -->
onUnLoad=
"timeOver();"
group of statements -->
onChange=
"if (!checkVal(this.value, 1, 10)){
this.focus();
this.select();}"
EXAMPLE
13.2
<html>
<head><title>An event</title></head>
1
<body bgcolor="magenta"
onUnload="alert('So long, stranger!')"
;>
<center>
2
<form>
3
<input type="button"
4
value="Click here to be alerted"
5
onClick='alert("Watch out! An asteroid is approaching
earth!")' />
6
</form>
</center>
</body>
</html>
EXPLANATION
1
The
<body>
tag contains the
onUnload
event handler. When the user browses to
another page or exits the page, the
alert()
method will be triggered. Normally you
would use this event for a quick cleanup or exit function, such as closing a win-
dow or clearing a page. Starting some time-consuming process at this point would
be annoying to the user, because he or she is trying to leave this page without silly
delays. The only purpose for this example is to demonstrate when the event hap-
pens.
2
The form starts here with the
<form>
tag.
3
The input type for this form is
“button”
.
4
The value on the button is
“Click here to be alerted”
.
5
The
onClick
event is an attribute of the HTML form's input tag. When the user
clicks the mouse on the button (the
onClick
event), the
alert()
method is called.
See Figure 13.2.
6
The HTML form tag ends here.
