JavaScript Events
(Page 1 of 5 )
In our last article we left off with a glimpse of JavaScript Events. In this tutorial we are going to go through each one and learn how to use them to create more dynamic web sites. So slap on your seat belts and get your helmets ready. This is gonna be an action-packed episode.
KAPOW!
Let’s start off by reviewing our table full of Javascript Events:
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 |
OnAbort
As shown in the table above, the OnAbort Event occurs when the loading of an image is interrupted. When this occurs you may wish to alert the user in any number of ways. Below is an example of how to use a function with the OnAbort event.
<html>
<head>
<script type="text/javascript">
function noImage()
{
alert('There was an issue loading your image. Perhaps you are too ugly')
}
</script>
</head>
<body>
<img src="your_photo.gif"
onabort="noImage()">
</body>
</html>
In the above code, we write a script that loads a photo named your_photo.gif. If the loading of the photo is aborted, it triggers a function we named noImage, which uses a pop-up alert box to display the following text: There was an issue loading your image. Perhaps you are too ugly.
You could also have achieved the same affect much easier, but I wanted to show you how to call a function. The easier method would have been to write this:
<html>
<head>
</head>
<body>
<script type="text/javascript">
<img src="your_photo.gif"
onabort=”alert('There was an issue loading your image. Perhaps you are too ugly')”>
</script>
</body>
</html>
This would end in the same result as our previous code.
Supporting HTML tags: <img>
Supporting Javascript Objects: image
Next: OnBlur >>
More JavaScript Articles
More By James Payne
/ 7 
