Home arrow JavaScript arrow JavaScript Events
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
Rating: 4 stars4 stars4 stars4 stars4 stars / 20
November 26, 2007
TABLE OF CONTENTS:
  1. · JavaScript Events
  2. · OnBlur
  3. · OnChange
  4. · OnClick
  5. · OnDblClick

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
JavaScript Events
(Page 1 of 5 )

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 >>

blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks
- Dynamic jQuery Styling

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 8 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials