JAVASCRIPT

JavaScript Events

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.

Author Info:

By: James Payne

Poor Best

Rating:

/ 20

November 26, 2007

TABLE OF CONTENTS:

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>

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>

<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