Intranet Journal: JavaScript By Example

Javascript Event Handlers
A tutorial with reusable code snippets

Page 1 2 3

onReset
An onReset event handler executes JavaScript code when the user resets a form by clicking on the reset button.

Example:

<HTML>
<HEAD><TITLE> Example of onReset Event Handler </TITLE>
</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>

Test This Script.

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.

Example:

<HTML>
<HEAD><TITLE> Example of onSelect Event Handler </TITLE>
</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>

Test This Script.

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.

Example:

<HTML>
<HEAD><TITLE> Example of onSubmit Event Handler </TITLE>
</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("Thank you "
+ myform.data.value +"!")'>
<input type="text" name="data">
<input type="submit" name ="submit"
value="Submit this form">
</form>
</BODY></HTML>

Test This Script.

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. Here's an example of onUnload event handler.

<HTML>
<HEAD><TITLE> Example of onUnload Event Handler </TITLE>
<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>

Test This Script.

In this example, the onUnload event handler calls the goodbye() function as user exits a document.

Note: You can also call JavaScript code via explicit event handler call. For example say you have a function called myfunction(). You could call this function like this:

document.form.mybotton.onclick=myfunction

Notice that you don't need to put () after the function. The event handler has to be spelled with lowercase characters.

Conclusion

JavaScript's built-in event handlers account for much of the language's power and popularity. This article introduced the basic functions available in version 3.0 browsers at the time of this writing.

As browser technology advances and new scripting standards are introduced, the number of event handlers will multiply. The risk is that vendor-specific innovation will keep the technology from maturing even as it becomes more powerful. Nevertheless, the good news for developers and users is that event-driven applications are closer than ever before - as close as your standard issue web browser.

Page 1 2 3

The Author Reaz Hoque (pronounced Re-oz Hawk) is an author, software developer, speaker and web designer. Recently he worked on the development team for one of the world's first on-line commercial applications for General Electric's startup company Public Sourcing Services. In addition to web development, Reaz is accomplished in Pascal, Visual Basic, Assembler, C++, and SQL. His articles are seen regularly on various online and print magazines. Reach Reaz with comments at rhoque@rhoque.com.