Quackit Logo
JavaScript Home

JavaScript Tutorial

Introduction
How to Enable JavaScript
JavaScript Syntax
JavaScript Popup Boxes
JavaScript and HTML
External JavaScript File
JavaScript Operators
JavaScript Variables
JavaScript Functions
JavaScript Events
JavaScript If Statements
JavaScript Switch Statements
JavaScript While Loop
JavaScript For Loop
JavaScript Try Catch
JavaScript Escape Characters
JavaScript Void(0)
JavaScript Cookies
JavaScript Date and Time
JavaScript Arrays
Two Dimensional Arrays
JavaScript innerHTML
JavaScript Summary

JavaScript Reference

JavaScript Reserved Words
JavaScript Event Handlers
JavaScript Date and Time Functions

JavaScript Examples

List of Examples
JavaScript Dropdown Menu
JavaScript Print
JavaScript Alert Box
JavaScript Confirm
JavaScript Prompt
JavaScript Status Bar Messages
Image Rollovers
Popup Windows
JavaScript Redirect
Timed JavaScript Redirect
JavaScript Refresh Page
FREE Hosting!
With every domain you register with ZappyHost you get FREE hosting.
Create free Flash websites

JavaScript Events

Print Version

In the previous lesson, we used an event handler to trigger off a call to our function. There are 18 event handlers that you can use to link your HTML elements to a piece of JavaScript.

When you write a JavaScript function, you will need to determine when it will run. Often, this will be when a user does something like click or hover over something, submit a form, double clicks on something etc.

These are examples of events.

Using JavaScript, you can respond to an event using event handlers. You can attach an event handler to the HTML element for which you want to respond to when a specific event occurs.

For example, you could attach JavaScript's onMouseover event handler to a button and specify some JavaScript to run whenever this event occurs against that button.

The HTML 4 specification refers to these as intrinsic events and defines 18 as listed below:

Event Handler Event that it handles
onBlur User has left the focus of the object. For example, they clicked away from a text field that was previously selected.
onChange User has changed the object, then attempts to leave that field (i.e. clicks elsewhere).
onClick User clicked on the object.
onDblClick User clicked twice on the object.
onFocus User brought the focus to the object (i.e. clicked on it/tabbed to it)
onKeydown A key was pressed over an element.
onKeyup A key was released over an element.
onKeypress A key was pressed over an element then released.
onLoad The object has loaded.
onMousedown The cursor moved over the object and mouse/pointing device was pressed down.
onMouseup The mouse/pointing device was released after being pressed down.
onMouseover The cursor moved over the object (i.e. user hovers the mouse over the object).
onMousemove The cursor moved while hovering over an object.
onMouseout The cursor moved off the object
onReset User has reset a form.
onSelect User selected some or all of the contents of the object. For example, the user selected some text within a text field.
onSubmit User submitted a form.
onUnload User left the window (i.e. user closes the browser window).

The events in the above table provide you with many opportunities to trigger some JavaScript from within your HTML code.

I encourage you to bookmark this page as a reference - later on you may need a reminder of which events you can use when solving a particular coding issue.

Enjoy this website?

  1. Add this page to your Favorites
  2. Link to this page (copy/paste into your own website or blog):
  3. Help support Quackit by making a donation

Oh, and thank you for supporting Quackit!
Need Website Content?
Get unique, quality digital content for your website.
  • 270+ Website Templates
  • 800+ Flash Templates
  • 25,000+ Images, Logos
  • 30,000+ e-Books
  • 15,000+ Scripts
  • 27,000+ Animated GIFs
  • 21,000+ Ringtones
  • ...and much more!
Get your content now!
$1.99 .info domain names!
© Copyright 2000 - 2010 Quackit.com