Event Handling

Event handling is one of the most important aspects of JavaScript. It allows your JavaScript code to respond to certain events. This includes when the user clicks the mouse, or changes a value, or moves the mouse.

Let's first take an overview of all the different events.

Whew... For a simple scripting language, that sure is a plethora of events.

Each event works a little differently. Each one is intended for different parts of the document. For instance, the onBlur event is used with a select, test, or textarea fields on a form. It can only work on these things. So for instance: 

  <input type="text" onBlur="some_javascript_function()">
Just stick the event in the tag, and give it some JavaScript code to run.

Since all the events work a little differently, let's just look at them in turn.

onBlur

The onBlur event occurs whenever a form object loses focus.

Tags it works with:

Example: 
  <input type="text" onBlur="save_value()">

onChange

The onChange event occurs whenever a form object loses focus AND its value has been changed.

Tags it works with:

onClick

The onClick event occurs whenever a form object is clicked with a mouse.

Tags it works with:

onFocus

The onFocus event occurs whenever a form object receives focus either by the keyboard or the mouse. If the user uses the mouse to select text (by dragging the mouse), this does NOT general an onFocus event. Instead, it generates an onSelect event.

Tags it works with:

onLoad

The onLoad event occurs whenever the browser is done loading the window. If there are frames within the window, then it waits until all the frames are loaded.

Tags it works with:

onMouseOver

The onMouseOver event occurs whenever the mouse pointer goes over an object from outside that object. Be sure to return true; at the end of your statement.

Tags it works with:

Example: 
  <a href="http://www.acm.uiuc.edu/" onMouseOver="window.status='ACM'; return true">
The above code will change the status bar to say "ACM" whenever the mouse runs over the link.

onSelect

The onSelect event occurs whenever the user selects some text within a text or textarea field.

Tags it works with:

onSubmit

The onSubmit event occurs whenever a form is submited. To prevent the form from being submited, use return false to stop it. Otherwise use return true to make the form be submitted.

Tags it works with:

onUnload

The onUnload event occurs whenever the user leaves a document.

Tagis it works with:

Return to the Front Page