Events and Event Handlers
What are events?
- The user clicking the mouse button
- The Web page loading
- A form field being changed
|Event handler||Applies to:||Triggered when:|
||The loading of the image is cancelled.|
||The object in question loses focus (e.g. by clicking outside it or pressing the TAB key).|
||The data in the form element is changed by the user.|
||The object is clicked on.|
||The object is double-clicked on.|
||An icon is dragged and dropped into the browser.|
||The object in question gains focus (e.g. by clicking on it or pressing the TAB key).|
||The user presses a key.|
||The user presses or holds down a key.|
||The user releases a key.|
||The whole page has finished loading.|
||The user presses a mouse button.|
||None||The user moves the mouse.|
||The user moves the mouse away from the object.|
||The user moves the mouse over the object.|
||The user releases a mouse button.|
||The user moves the browser window or frame.|
||The user clicks the form's Reset button.|
||The user resizes the browser window or frame.|
||The user selects text within the field.|
||The user clicks the form's Submit button.|
||The user leaves the page.|
Using an event handler
To use an event handler, you usually place the event handler name within the HTML tag of the object you want to work with, followed by
<input type="submit" name="clickme" value="Click Me!" onclick="alert('Thank You!')"/>
"onClick"), you should use all lowercase in the HTML itself (
"onclick") if you want your markup to follow the XHTML specification (which we do!). All element names and attributes must be lowercase in XHTML.
Event object is created automatically whenever an event occurs. There are a number of properties associated with the
Event object that can be queried to provide additional information about the event:
- Used by the
onDragDropevent. Returns an array of URLs of dropped objects.
- Stores the height of the window or frame containing the object connected with the event.
- Returns a string listing any modifier keys that were held down during a key or mouse event. The modifier key values are:
- These properties hold the X and Y pixel coordinates of the cursor relative to the page, at the time of the event.
- These properties hold the X and Y pixel coordinates of the cursor relative to the screen, at the time of the event.
- Returns a string representing the object that initiated the event.
- Returns a string representing the type of the event (keypress, click, etc).
- Returns a number representing the mouse button that was pressed (1=left, 2=middle, 3=right) or the ASCII code of the key that was pressed.
- Stores the width of the window or frame containing the object connected with the event.
- These properties hold the X and Y pixel coordinates of the cursor relative to the layer connected with the event or, for the
onResizeevent, the width and height of the object after it was resized. (You can also use
event.layerY, which do the same thing.)
Some common event handlers
In this section, we'll look at a few of the more commonly used event handlers, and examine how they can be used.
This example code ensures that you type in both your first and your last names. It will bring up an alert box and refocus the text box field if you only type one word into the text box.
In this example, an alert box is displayed when you click on the link below.
<a href="#" onclick="alert('Thanks!')">Click Me!</a>
onFocus is executed whenever the specified object gains focus. This usually happens when the user clicks on the object with the mouse button, or moves to the object using the TAB key.
onFocus can be used on most form elements.
This example text box contains the prompt "Please enter your email address" that is cleared once the text box has focus.
<input type="text" name="email_address" size="40" value="Please enter your email address" onfocus="this.value=''"/>
You can use
onKeyPress to determine when a key on the keyboard has been pressed. This is useful for allowing keyboard shortcuts in your forms and for providing interactivity and games.
This example uses the
onKeyPress event handler for the
Window object to determine when a key was pressed. In addition, it uses the
which property of the
Event object to determine the ASCII code of the key that was pressed, and then displays the pressed key in a text box. If
event.which is undefined it uses
event.keyCode instead (Internet Explorer uses
event.keyCode instead of
onLoad event handler is triggered when the page has finished loading. Common uses of
onLoad include the dreaded pop-up advertisement windows, and to start other actions such as animations or timers once the whole page has finished loading.
This simple example displays an alert box when the page has finished loading:
<html> <body onload = "alert('Thanks for visiting my page!')"> My Page </body> </html>
Here's a simple example that alters the value of a text box depending on whether the mouse pointer is over a link or not.
<form> <input type="text" id="status" value="Not over the link"/> <br> <a href="" onmouseover="document.getElementById('status').value='Over the link'" onmouseout="document.getElementById('status').value='Not over the link'">Move the mouse over me!</a> </form>
The onSubmit event handler, which works only with the
This example asks you to confirm whether you want to submit the form or not when you click on the button. It returns
true to the event handler if the form is to be submiited, and
false if the submission is to be cancelled.
<form onsubmit="return confirm('Are You Sure?')" action=""> <input type="submit" name="submit" value="Submit"/> </form>
Responses to this article
3 responses (oldest first):
You'll probably want to increase the width and height of the image in the onmouseover handler, and decrease them again in the onmouseout handler.
Post a response
Want to add a comment, or ask a question about this article? Post a response.
To post responses you need to be a member. Not a member yet? Signing up is free, easy and only takes a minute. Sign up now.