JavaScript
Event Handlers:
- This is how JavaScript responds to user interactions ("which we call
events") with the web-browser and web-page the JavaScript is embedded
in.
- This is part of what makes JavaScript attractive as a Web Programming
language.
|
Event Handler
|
Cause/Event
|
Objecst can Apply to
|
| onClick |
When mouse clicks on Object |
checkboxes, links, radio buttons, reset buttons, and submit
buttons |
| onMouseOver |
When mouse is over an object |
links |
| onMouseOut |
When mouse leaves an object |
links |
| onSubmit |
When a submit button in an HTML form is hit |
form's submit button |
| onReset |
When a reset button in an HTML form is hit |
form's reset button |
| onSelect |
When text in a text box or text area of an HTML
form is selected |
form's text box, text area |
| onLoad |
When object finishes loading |
images, windows |
| onUnload |
When window is exited |
window |
| onAbort |
When object stopped from loading |
images |
| onBlur |
When object looses focus |
all form elements, windows |
| onFocus |
When object gains focus |
all form elements, windows |
| onChange |
When object's value changes and is then put
out of focus |
select objects, text boxes, textareas |
| onError |
When JavaScript error occurs |
images, windows |
HOW TO USE Event Handlers
|
Generically, in HTML you will have an HTML tag that
you will add the eventhandler and command to perform:
<tag EventHandler="statements_to_do">
|
|
Example:
<HTML>
<HEAD>
<SCRIPT Language="JavaScript">
function SayHello() {
document.writeln("<h1>Hello
" + document.helloform.nametext.value + "</h1>");
//for
sake of brevity only sent a single HTML line
//ideally
send the complete HTML tags
}
</SCRIPT>
</HEAD>
</BODY>
<form name="helloform">
<INPUT
type="text" value=" " name="nametext">
<INPUT
type="button" value="Enter" onClick="SayHello();"
>
</form>
</BODY>
</HTML>
|
Click here to see above example
Here is a variation of the above
with an hyper-linked image using onMouseOver and onMouseOut
|
Part III: Understanding Event Handlers
1. In object-oriented programming, events are used to trigger portions
of a program. In JavaScript, events trigger a response in the web page, providing
a way to integrate JavaScript into the web page not possible with other languages,
even PERL and other CGI scripts.
Here's a list of event handlers
| onAbort |
Occurs when the user aborts the loading of an image |
| onBlur |
Occurs when an object on the page loses focus |
| onChange |
Occurs when a text field is changed by the user |
| onClick |
Occurs when the user clicks on an item |
| onError |
Occurs when a document of image can't load correctly |
| onFocus |
Occurs when an item gains focus |
| onLoad |
Occurs when a the page (or an image) finishes loading |
| onMouseOver |
Occurs when the mouse pointer moves over an item |
| onMouseOut |
Occurs when the mouse pointer moves off an item |
| onSelect |
Occurs when the user selects text in a text area |
| onSubmit |
occurs when a submit button is pressed |
| onUnload |
Occurs when the user leaves the document or exits |
2. You don't have to use a <SCRIPT> tag to use an event handler; they
are an attribute of an HTML tag. Here's a common use of an event handler
<A
HREF="http://xxxx.csuhayward.edu/CS3520/index.htm"
onMouseOver="window.status='Web Site Development Homepage'; return
true">
CS 3520</A>
|
First part of the event handler shows the message in single quotes; double
quotes are used by HTML. The second part keeps the message from being erased,
as long as the mouse is over the hypertext link. Note that window is a standard
object in JavaScript and window.status represents the status bar at the bottom
of the window. You can read and write messages there. The above means than
when anyone puts there mouse over the link it will display the message
Part IV: Understanding the window Object
3. In this example, you'll use the event handler onClick along with
a form to change the status line:
<HTML>
<HEAD><TITLE>The Amazing Status Line Changer</TITLE>
</HEAD>
<BODY>
<H1>Change the Status Line</H1>
<HR>
Enter the text for the status line in the space below, then
press the CHANGE button to change it.<HR>
<FORM NAME="statform">
<INPUT TYPE="text" SIZE="65"
NAME="input1"><BR>
<INPUT TYPE="button" VALUE="CHANGE"
onClick="window.status=document.statform.input1.value;">
</FORM>
<HR>
end.
</BODY>
</HTML>
|
The event uses the input value in the form to change the status line. It
uses a built-in object, called window. The window object actually
has three properties, called child objects: document, history
and location. In this case, the child object document is used to
obtain form elements and use them interactively.
4. There are a number of methods included in the built-in window method.
We'll look at two of them. First the window.open method, which let's
you open a new browser window and taylor it to your needs. Here's what it
looks like in general:
WindowName=window.open("URL", "WindowName",
"FeatureList");
|
WindowName is the name of the new object.
URL is any hypertext link. If this is blank, no Web page will load.
WindowName is the name used for TARGETS, as is done with
Frame sites.
And Feature List is a collection of options, separated by commas.
For example, to create a small window with no toolbar or status line, try
this
SmallWin = window.open
("", "small",
"width=100,height=120,toolbar=0,status=0)
|
5. Try this page, where you'll create windows and then close them:
<HTML>
<HEAD><TITLE>Create a New Window</TITLE>
</HEAD>
<BODY>
<H1>Create a New Window</H1>
<HR>
Use the buttons below to test opening and closing windows in JavaScript.
<HR>
<FORM NAME="winform">
<INPUT TYPE="button" VALUE="Open New Window"
onClick="NewWin=window.open('','NewWin',
'toolbar=no,status=no,width=200,height=100'); ">
<P><INPUT TYPE="button" VALUE="Close New Window"
onClick="NewWin.close();" >
<P><INPUT TYPE="button" VALUE="Close Main Window"
onClick="window.close();">
</FORM>
<HR>
</BODY>
</HTML>
|
6. In this example, you 'll use some more methods that useful for displaying
a message and interactng with the user: alert(), confirm()
and prompt():
<HTML>
<HEAD><TITLE>Alerts, Confirmations, and Prompts</TITLE>
</HEAD>
<BODY>
<H1>Alerts, Confirmations, and Prompts</H1>
<HR>
Use the buttons below to test dialogs in JavaScript.
<HR>
<FORM NAME="winform">
<INPUT TYPE="button" VALUE="Display an Alert"
onClick="window.alert('This is a test alert.'); ">
<P><INPUT TYPE="button" VALUE="Display a
Confirmation"
onClick="temp = window.confirm('Would you like to confirm?');
window.status=(temp)?'confirm: true':'confirm: false'; ">
<P><INPUT TYPE="button" VALUE="Display a Prompt"
onClick="var temp = window.prompt('Enter some Text:','This is the
default value');
window.status=temp; ">
</FORM>
<BR>Have fun!
<HR>
</BODY>
</HTML>
|
Next : Scrolling Quotations (loops) and Form
Validation (conditionals)