|
|
 |
JavaScript for Pros
by Reaz Hoque (rhoque@rhoque.com)
An event handler executes a segment of a code based on certain events
occurring within the application, such as onLoad or onClick. JavaScript event
handers can be divided into two parts: interactive event handlers and
non-interactive event handlers. An interactive event handler is the one
that depends on user interaction with the form or the document. For
example, onMouseOver is an interactive event handler because it depends on
the user's action with the mouse. An example of a non-interactive event
handler is onLoad, as it automatically executes
JavaScript code without the need for user interaction. Here are all the event handlers
available in JavaScritpt.
| Event Handler
| Used In
| onAbort
onBlur
onChange
onClick
onError
onFocus
onLoad
onMouseOver
onMouseOut
onSelect
onSubmit
onUnload
| image
select, text, text area
select, text, textarea
button, checkbox, radio, link, reset, submit, area
image
select, text, testarea
windows, image
link, area
link, area
text, textarea
form
window
|
onAbort:
An onAbort event handler executes JavaScript code when the user aborts loading an image.
See Example:
<![CDATA[
<HTML>
<TITLE> Example of onAbort Event Handler </title>
<HEAD>
</HEAD>
<BODY bgcolor="ffffff" >
<H3> Example of onAbort Event Handler: </H3>
<b>Stop the loading of this image and
see what happens:</b><br><br>
<IMG SRC="http://rhoque.com/rhoque.jpg"
onAbort="alert('You stopped the loading the image!')">
</body>
</HTML>
]]>
Here, an alert() method is called using the onAbort event handler when the user
aborts loading the image.
onBlur:
An onBlur event handler executes JavaScript code when input focus leaves
the field of a text, textarea, or a select option. For windows, frames and framesets
the event handler executes JavaScript code when the window loses focus.
In windows you need to specify the event handler in the <BODY> attribute.
For example,
<BODY BGCOLOR='#ffffff'
onBlur="document.bgcolor='#000000'">
Note: On a Windows platform, the onBlur event does
not
work with <FRAMESET>.
See Example:
<![CDATA[
<HTML>
<TITLE> Example of onBlur Event Handler </title>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function valid(form){
var input=0;
input=document.myform.data.value;
if (input<0){
alert("Please enter a value that is less than 0");
}
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="FFFFFF" TEXT="000000">
<H3> Example of onBlur Event Handler: </H3>
Try entering a value less than zero:<br>
<form name="myform">
<input type="text" name="data"
value="" size=10 onBlur='valid(this.form)'>
</form>
</BODY>
</HTML>]]>
In this example, 'data' is a text field. When a user attempts to leave the field,
the onBlur event handler calls the valid() function to confirm that 'data' has a legal
value. Note that the keyword this is used to refer to the current object.
onChange:
The onChange event handler executes JavaScript code when input focus exits
the field after the user modifies its text.
See Example:
<![CDATA[
<HTML>
<TITLE> Example of onChange Event Handler </title>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function valid(form){
var input=0;
input=document.myform.data.value;
alert("You have changed the value from 10 to " + input );
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="FFFFFF" TEXT="000000">
<H3> Example of onChange Event Handler </H3>
Try changing the value from 10
to something else:<br>
<form name="myform">
<input type="text" name="data"
value="10" size=10
onBlur='valid(this.form)'>
</form>
</BODY>
</HTML>
]]>
In this example, 'data' is a text field. When a user attempts to leave the field after
a change of the original value, the onChange event handler calls the valid() function
which alerts the user about value that has been entered.
onClick:
In an onClick event handler, a JavaScript function is called when an object
in a button (regular, radio, reset and submit) is clicked, a link is pushed,
a checkbox is checked or an image map area is selected. Except for the regular
button and the area, the onClick event handler can return false to cancel
the action. For example,
<INPUT TYPE="submit" NAME="mysubmit"
VALUE="Submit" onClick="return
confirm(`Are you sure you want to submit the
form?')">
Note: On the Windows platform, the onClick event handler
does not work with reset buttons.
See Example:
<![CDATA[
<HTML>
<TITLE> Example of onClick Event Handler</title>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function valid(form){
var input=0;
input=document.myform.data.value;
alert("Hello " + input + " ! Welcome...");
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="FFFFFF" TEXT="000000">
<H3> Example of onClick Event Handler </H3>
Click on the button after entering
your name into the text box:<br>
<form name="myform">
<input type="text" name="data"
value="" size=10>
<INPUT TYPE="button" VALUE="Click Here"
onClick="valid(this.form)">
</form>
</BODY>
</HTML>
]]>
In this example, when the user clicks the button "Click Here", the onClick event
handler calls the function valid().
onError:
An onError event handler executes JavaScript code when an error occurs
while loading a document or an image. With the onError event you can now turn
off the standard JavaScript error messages and have your own function that
will trace all the errors in the script. To disable all the standard JavaScript error
messages, all you need to do is set
window.onerror=null. To call a function
when an error occurs all you need to do is
this: onError="myerrorfunction()".
See Example:
<![CDATA[
<HTML>
<TITLE> Example of onError event handler </title>
<HEAD>
<SCRIPT Language="JavaScript">
window.onerror = ErrorSetting
var e_msg="";
var e_file="";
var e_line="";
document.form[8].value="myButton"; //This is the error
function ErrorSetting(msg, file_loc, line_no) {
e_msg=msg;
e_file=file_loc;
e_line=line_no;
return true;
}
function display() {
var error_d = "Error in file: " + e_file +
"\nline number:" + e_line +
"\nMessage:" + e_msg;
alert("Error Window:\n"+error_d);
}
</SCRIPT>
</HEAD>
<BODY bgcolor="ffffff" text="000000">
<h3> Example of onError event handler </h3>
<form>
<input type="button"
value="Show the error"
onClick="display()"></form>
</body>
</HTML>]]>
Notice that the function ErrorSetting() takes three arguments: message text, URL and Line
number of the error line. So all we did was invoke the function when an error occured and set
these values to three different variables. Finally, we displayed the values via an alert method.
Note: If you set the function ErrorSetting() to False, the standard dialog will be
seen.
onFocus:
An onFocus event handler executes JavaScript code when input focus enters the field either
by tabbing in or by clicking but not selecting input from the field. For windows, frames and framesets
the event handler executes JavaScript code when the window gets focused. In windows you need
to specify the event handler in the <![CDATA[<BODY>]]> attribute. For example,
<![CDATA[<BODY BGCOLOR='#ffffff' onFocus="docuement.bgcolor='#000000'">]]>
Note: On the Windows platform, the onFocus event handler does not work with <FRAMESET>.
See Example:
<![CDATA[<HTML>
<TITLE> Example of onFocus Event Handler </title>
<HEAD></HEAD>
<BODY BGCOLOR="FFFFFF" TEXT="000000">
<H3> Example of onFocus Event Handler </H3>
Put your mouse into the text box:<br>
<form name="myform">
<input type="text" name="data"
value="" size=10
onFocus='alert("You focused the textbox!!")'>
</form>
</BODY>
</HTML>]]>
In the above example, when you put your mouse on the text box, an alert()
message displays a message.
onLoad:
An onLoad event occurs when a window or image finishes loading. For windows, this event handler
is specified in the BODY attribute of the window. In an image, the event handler
will execute handler text when the image is loaded. For example:
<![CDATA[
<IMG NAME="myimage"
SRC="http://rhoque.com/ad_rh.jpg"
onLoad="alert('You loaded myimage')">
]]>
See Example:
<![CDATA[
<HTML>
<TITLE> Example of onLoad Event Handler </title>
<HEAD>
<SCRIPT LANGUGE="JavaScript">
function hello(){
alert("Hello there...\nThis is an example of onLoad.");
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="FFFFFF" TEXT="000000" onLoad="hello()">
<H3> Example of onLoad Event Handler </H3>
</BODY>
</HTML>
]]>
The example shows how the function hello() is called by using the onLoad event handler.
onMouseOver:
JavaScript code is called when the mouse is placed over a specific link or an object or area
from outside that object or area. For the area object the event handler is specified with the
<![CDATA[<AREA>]]> tag. For example:
<![CDATA[
<MAP NAME="mymap">
<AREA NAME="FirstArea"
COORDS="0,0,49,25" HREF="mylink.html"
onMouseOver="self.status='This will take you to mylink.html';
return true">
</MAP>]]>
See Example:
<![CDATA[
<HTML>
<TITLE> Example of onMouseOver Event Handler </title>
<HEAD>
</HEAD>
<BODY BGCOLOR="FFFFFF" TEXT="000000">
<H3> Example of onMouseOver Event Handler </H3>
Put your mouse over
<A HREF=""
onMouseOver="window.status='Hello! How are you?';
return true;">here</a> and look at the
status bar.
</BODY>
</HTML>
]]>
In the above example when you point your mouse to the link, the
text "Hello! How are you?" appears on your window's status bar.
onMouseOut:
JavaScript code is called when the mouse leaves a specific link or an object or area
from outside that object or area. For area object the event handler is specified with
the <![CDATA[<AREA>]]> tag.
See Example:
<![CDATA[
<HTML>
<TITLE> Example of onMouseOut Event Handler </title>
<HEAD>
</HEAD>
<BODY BGCOLOR="FFFFFF" TEXT="000000">
<H3> Example of onMouseOut Event Handler </H3>
Put your mouse over
<A HREF=""
onMouseOut="window.status='You left the link!';
return true;"> here</a> and then take the
mouse pointer away.
</BODY>
</HTML>
]]>
In the above example, after pointing your mouse and leaving the link , the text "You left the
link!" appears on your window's staus bar.
onReset:
An onReset event handler executes JavaScript code when the user resets a form by clicking on the reset button.
See Example:
<![CDATA[
<HTML>
<TITLE> Example of onReset Event Handler </title>
<HEAD></HEAD>
<BODY BGCOLOR="FFFFFF" TEXT="000000">
<H3> Example of onReset Event Handler </H3>
Please type something in the text box
and press the reset button:<br>
<form name="myform"
onReset="alert('This will reset the form!')">
<input type="text" name="data"
value=" " size=20 value="" >
<input type="reset" Value="Reset Form"
name="myreset">
</form>
</BODY>
</HTML>
]]>
In the above example, when you push the button, "Reset Form" after typing something, the alert method displays the message, "This will reset the form!"
onSelect:
A onSelect event handler executes JavaScript code when the user selects some of the text within a text or textarea field.
See Example:
<![CDATA[
<HTML>
<TITLE> Example of onSelect Event Handler </title>
<HEAD></HEAD>
<BODY BGCOLOR="FFFFFF" TEXT="000000">
<H3> Example of onSelect Event Handler</H3>
Select the text from the text box:<br>
<form name="myform">
<input type="text" name="data"
value="Select This" size=20
onSelect='alert("This is an example of onSelect!!")'>
</form>
</BODY>
</HTML>
]]>
In the above example, when you try to select the text or part of the text, the alert method displays the message, "This is an example of onSelect!!"
onSubmit:
An onSubmit event handler calls JavaScript code when the form is submitted.
See Example:
<![CDATA[
<HTML>
<TITLE> Example of onSubmit Event Handler </title>
<HEAD>
</HEAD>
<BODY BGCOLOR="FFFFFF" TEXT="000000">
<H3> Example of onSubmit Event Handler </H3>
Type your name and press the button<br>
<form name="myform"
onSubmit='alert("Thanks you " +
myform.data.value +"!")'>
<input type="text" name="data">
<input type="submit" name ="submit"
value="Submit this form">
</form>
</BODY>
]]>
In this example, the onSubmit event handler calls an alert() function when the button "Sumbit this form" is pressed.
onUnload:
JavaScript code is called when a documented is exited.
See Example:
<![CDATA[
<HTML>
<TITLE> Example of onUnload Event Handler </title>
<HEAD>
<SCRIPT LANGUGE="JavaScript">
function goodbye(){
alert("Thanks for Visiting!");
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="FFFFFF" TEXT="000000"
onUnLoad="goodbye()">
<H3> Example of onUnload Event Handler </H3>
Look what happens when you try
to leave this page...
</BODY>
</HTML>
]]>
In this example, the onUnload event handler calls the goodbye() function
as user exits a document.
* * * * *
About the Author:
This article
is adapted from a chapter of Reaz Hoque's upcoming JavaScript book tentatively titled
"JavaScript For Pros" by MIS Press. Hoque is an author,
software developer and web designer. Recently he worked on one of the world's first on-line
commerce application development for FGIC Public Sourcing Services (a division of GE Capital).
|
