JavaScript Example 1-4
Basic Event Handler (Events #1)

Click Here for Previous JavaScript Tutorial Home Click Here for Next

Purpose

This example explores and illustrates the basic concepts of handling mouse events with JavaScript.

HTML 4 provides a large number of "hooks" for mouse and window events. In programming, a hook is something the programmer can use to call some function of their own choosing whenever a particular event occurs, such as a mouse button press.  Such functions are known in general as event handlers. Event handlers can be written in any supported scripting language but, not surprisingly, we're only concerned with JavaScript here.

My First JavaScript Event Handler

OK, it wasn't really my very first, but it was the first one I did when I decided to re-learn JavaScript. And it wasn't quite this simple. It was the example in Dr. Clue's Javascript tutorial.

The HTML 4.0 specification includes what they call intrinsic events: a whole bunch of built-in hooks that the document writer/programmer can use to bind event handlers to particular events. These take the form of attributes which can be added to certain HTML tags.

<a href="#DummyLink" onmouseover="alert('You just handled the onmouseover event.')">
Place Mouse Here</a>

Above is a single line of HTML code contains a definition of the intrinsic event onmouseover.  The value assigned to the intrinsic event is a script which will be called when the event occurs.

Let's try it out.  Go ahead and move your mouse cursor across the following text:

Place Mouse Here

You should have seen an alert window pop up.

The example is very short, but before we go on there are a number of important things to notice about it.

A List of Intrinsic Events

Here is a list of intrinsic event attribute definitions as shown in Section 18.2.3 of the W3C HTML 4.01 Specification with a few additional notes from Netscape's JavaScript 1.2 Reference Manual. The W3C events are a subset of the list given in the Netscape document. Netscape includes the additional events onAbort, onDragdrop, onError, onMove and onResize. Microsoft IE5 has an even larger list of extended events.

onload = script
The onload event occurs when the user agent finishes loading a window or all frames within a FRAMESET. This attribute may be used with BODY and FRAMESET elements.
onunload = script
The onunload event occurs when the user agent removes a document from a window or frame (i.e when the user exits the document). This attribute may be used with BODY and FRAMESET elements.
onclick = script
The onclick event occurs when the pointing device button is clicked over an element. This attribute may be used with most elements.
ondblclick = script
The ondblclick event occurs when the pointing device button is double clicked over an element. This attribute may be used with most elements.
onmousedown = script
The onmousedown event occurs when the pointing device button is pressed over an element. This attribute may be used with most elements.
onmouseup = script
The onmouseup event occurs when the pointing device button is released over an element. This attribute may be used with most elements.
onmouseover = script
The onmouseover event occurs when the pointing device is moved onto an element (i.e. the cursor moves over an object or area from outside that object or area). This attribute may be used with most elements.
onmousemove = script
The onmousemove event occurs when the pointing device is moved while it is over an element. This attribute may be used with most elements.
onmouseout = script
The onmouseout event occurs when the pointing device is moved away from an element (i.e. the cursor is moved out of an element from inside it). This attribute may be used with most elements.
onfocus = script
The onfocus event occurs when an element receives focus either by the pointing device or by tabbing navigation. This attribute may be used with the following elements: A, AREA, LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.
onblur = script
The onblur event occurs when an element loses focus either by the pointing device or by tabbing navigation. It may be used with the same elements as onfocus.
onkeypress = script
The onkeypress event occurs when a key is pressed and released over an element. This attribute may be used with most elements.
onkeydown = script
The onkeydown event occurs when a key is pressed down over an element. This attribute may be used with most elements.
onkeyup = script
The onkeyup event occurs when a key is released over an element. This attribute may be used with most elements.
onsubmit = script
The onsubmit event occurs when a form is submitted. It only applies to the FORM element.
onreset = script
The onreset event occurs when a form is reset (the user clicks a reset button). It only applies to the FORM element.
onselect = script
The onselect event occurs when a user selects some text in a text field. This attribute may be used with the INPUT and TEXTAREA elements.
onchange = script
The onchange event occurs when a control (i.e. a select, text, or textarea field) loses the input focus and its value has been modified since gaining focus. This attribute applies to the following elements: INPUT, SELECT, and TEXTAREA.

An Example Using Most Intrinsic Events

Let's try handling most of these events. The example below consists of three text areas and some buttons. In the top text area we've defined handlers for every event except onload and onunload (which are only used with the body or frame elements). In the lower left text area, each of the handlers except the one for onmousemove will print the name of their event each time they are called. The lower right text area is used by the onmousemove handler to write a "+" each time it is called. The set of checkboxes at the bottom will record which of the possible events have been triggered.

Go ahead and see how many event handlers you can trigger.

Try Events Here:
Try the Buttons Too:  
Event Handler Output:
Results:
click: dblclick: mouseover: mouseout: mousemove:
focus: blur: keydown: keyup: keypress:
change: select: reset: submit:

Don't be too disappointed if you find that you cannot trigger all the event handlers, especially if you're using NN4. We'll discuss the results in a bit, but first lets see the code:

<script type="text/javascript" language="JavaScript">
  <!-- 
  function handler(t,c,s)
  {
    t.value += s;
    c.checked = true;
    return 0
  }
  // -->
</script>

<form name="formA" action="javascript:void(0)"
  onreset= "handler(formB.t1, formB.reset, 'reset ')" 
  onsubmit="handler(formB.t1, formB.submit, 'submit ')">

  <textarea rows="4" cols="45" wrap="soft" 
    onclick=    "handler(formB.t1, formB.click, 'click ')" 
    ondblclick= "handler(formB.t1, formB.dblclick, 'dblclick ')" 
    onmouseover="handler(formB.t1, formB.over, 'over ')" 
    onmouseout= "handler(formB.t1, formB.out, 'out ')" 
    onmousemove="handler(formB.t2, formB.move, '+')" 
    onfocus=    "handler(formB.t1, formB.focus, 'focus ')" 
    onblur=     "handler(formB.t1, formB.blur, 'blur ')" 
    onkeydown=  "handler(formB.t1, formB.keydown, 'keydown ')" 
    onkeyup=    "handler(formB.t1, formB.keyup, 'keyup ')" 
    onkeypress= "handler(formB.t1, formB.keypress, 'keypress ')" 
    onchange=   "handler(formB.t1, formB.change, 'change ')" 
    onselect=   "handler(formB.t1, formB.select, 'select ')">
    Move the mouse, click and type here.  Try selecting text.
  </textarea>
  <input type="Reset">  <input type="Submit" value="Submit">
</form>
  
<form name="formB">
  <!-- Event Handler Output: -->
  <textarea name="t1" rows="8" cols="45" wrap="soft"></textarea>
  <textarea name="t2" rows="8" cols="10" wrap="soft"></textarea>
  click:<input type="checkbox" name="click">
  <!-- additional checkboxes not shown... -->
</form>
For readability, the code shown above does not include the extra HTML used for layout, or most of the checkboxes.

Comparing this example to our first one-line event handler, aside from the fact that it is larger and uses forms, there are only a few additional ideas.

Why Didn't We Trigger All Events?

In the last section, if your browser is Netscape Navigator 4 or earlier you should have noticed that some of the event handlers we defined never got called. Even with IE5 you may have had a similar experience. I searched fruitlessly through the available documentation on JavaScript events for an explanation, but finally found one (at least part of one), not in JavaScript but in the documentation on HTML tags.

In the example we defined most of the event handlers as attributes of the TEXTAREA element that we are using for input. Referring to the Netscape HTML documentation for the TEXTAREA element we read that it supports exactly four of the event attributes:

This solves at least part of the mystery for NN4. Not all of it, however, because I still cannot get onselect to work, and I can get keydown, keyup and keypress.

With IE 5, I was able to trigger the handlers for all of the events except onkeyup, onkeydown. The Microsoft TEXTAREA documentation shows a long list of events that can be handled, and the list does include onkeyup and onkeydown. So once again we're left with a small mystery.

Netscape Navigator 4 and onselect

I was unable to get onselect to work at all with NN4. After wracking my brain and doing many net searches, I finally posted this question on Netscape's JavaScript developers' newsgroup (netscape.devs-javascript). Guru Martin Honnen replied, "onselect appears in the docs but doesn't work with any NN4 version. It works in NN6 however." So there you are -- sometimes you just have to ask.

Internet Explorer 5 and onkeyup / onkeydown

My other mystery was the absence of TEXTAREA onkeyup and onkeydown events in IE5. All I get is the onkeypress event. I had the same problem with an INPUT text element and an A element. However I finally discovered that the problem was not in IE itself. In my case IE was running as part my HTML editing application. The editor was trapping the keydown and keyup events itself. When I ran IE standalone it worked fine.

No more mysteries!

Resources

W3C HTML 4.0 Specification
See Section 18.2.3 on intrinsic events.
Dr. Clue's Javascript Tutorial
The tutorial from Dr. Clue is the basis for the first part of this example.
Netscape JavaScript Reference Manual
Refer to the sections on Events, the form and formName properties of the document object as well as the properties of the Form and TextArea classes.
IRT article Man-Handling Events #1 by Ryan Detert
IRT has some great articles on event handling written by Ryan Detert. Unfortunately, he seems to have misunderstood some things about events in Netscape.
Netscape JavaScript Developer's Guide
See the section on Events
Newsgroup netscape.devs-javascript
This is a private Netscape newsgroup that you will not find on other news servers. For information on Netscape newsgroups click here.
 
Click Here for Previous JavaScript Tutorial Home Click Here for Next