OnReset, OnResize and Other JavaScript Events
(Page 1 of 5 )
In our last tutorial we left off with the mouse events. We’ll be wrapping up the series on JavaScript events in this part. It’s been a long ride, but by the end of this article you should be able to create some nifty dynamic web pages. When Google buys your nerd-infested web site, don’t forget the guy who got you there.
Before we begin, let’s take one final look at our dearly beloved JavaScript Events table:
Event | What Triggers the Event |
OnAbort | Occurs when the loading of an image is interrupted |
OnBlur | Occurs when an element loses focus |
OnChange | Occurs when the user changes the content of a field |
OnClick | Occurs when the user clicks an object |
OnDblClick | Occurs when the user double clicks an object |
OnError | Occurs when an error occurs while loading a document or an image |
OnFocus | Occurs when an element has focus |
OnKeyDown | Occurs when a keyboard key is pressed |
OnKeyPress | Occurs when a keyboard key is pressed or held down |
OnKeyUp | Occurs when a keyboard key is released |
OnLoad | Occurs when a page or image has completed loading |
OnMouseDown | Occurs when a mouse button is pressed |
OnMouseMove | Occurs when the mouse is moved |
OnMouseOut | Occurs when the mouse is moved off of an element |
OnMouseOver | Occurs when the mouse is moved over an element |
OnMouseUp | Occurs when the mouse button is released |
OnReset | Occurs when the reset button is clicked |
OnResize | Occurs when a window or frame is resized. |
OnSelect | Occurs when text is selected |
OnSubmit | Occurs when the submit button is clicked |
OnUnload | Occurs when the user exits the page |
OnReset
This nifty little fellow is triggered when you click the Reset button on a form. In the following example, we create a form asking for the user’s first and last name. The fields have a default value of Chuck and Norris respectively. When the user enters their data and clicks the Reset button, a pop-up alert appears with the text: You fool! You reset the form! Then, the original values of the two text fields are returned. Want to see that in code? Here it be:
<html>
<body>
<form onreset="alert('You fool! You reset the form!')">
First Name: <input type="text" name="firstname" value="Chuck" />
<br />
Last Name: <input type="text" name="lastname" value="Norris" />
<br /><br />
<input type="reset" value="Reset">
</form>
</body>
</html>
Supporting HTML tags: <form>
Supporting Javascript Objects: form
Next: OnResize >>
More JavaScript Articles
More By James Payne
