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

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.

• Because intrinsic events are HTML attributes, their definition syntax (attribute="my defn here") resembles all other HTML attributes. This is just plain HTML except for what's in the quote marks.
• Inside the quotation marks ("my defn here") is where the syntax of the scripting language is used. The W3C spec calls this script data. The HTML engine or user agent will not evaluate script data itself but instead passes it on to a script engine.
• The onmouseover event definition is used here as an attribute of the HTML element defined by the <A>...</A> tags. That means it will only be valid for that element.
• You've just learned how to use the pre-defined JavaScript alert() function, a handy tool for debugging JavaScript code.
• The value of the href attribute is a dummy.   Netscape Navigator 4 (NN4) requires some href attribute or else it seems to ignore any events in the element. This is not an issue for Microsoft Internet Explorer 5 (IE5). But using a bogus link like this is very ugly. A better way to set the href attribute would be href="javascript:void(0)". Sorry, I'm not going to explain this further right now.

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.

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.

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.

• This time our JavaScript event handling code calls a function to do all the work. For example, onclick="handler(formB.t1, formB.click, 'click')" defines the click event handler as a call to the function handler(). This is usually a better practice than embedding statements in the attribute value.
• The function handler ends with return 0. This tells the JavaScript runtime system to stop any further handling of the current event. For more information see the Netscape JavaScript Reference Manual, Chapter 9: Events and Event Handlers.
• Notice that we've used single quotes around a string ('click') that is embedded within another string (onclick="handler(formB.t1, formB.click, 'click')" ).
• Observe that the first two parameters passed to handler() are JavaScript objects denoting a textarea and a checkbox that will be used for output. This is a useful convenience -- the event handler doesn't have to worry about which form or which checkbox to use for output.
• When handler() writes to the output textarea it makes use of the JavaScript object hierarchy. I won't spend any time on this here, but suggest you use the links in the Resources section below to read about the document object and its form or formName properties, as well as the Form and Textarea objects and their properties.
• Note that the onreset and onsubmit events can only be handled in the FORM element, not in the TEXTAREA element. The documentation is very clear on this point, but at first I didn't read carefully enough and tried to handle them from the TEXTAREA like the other events. It doesn't work.
• The first FORM includes the attribute action="javascript:void(0)". This defines what would happen when the Submit button is clicked, except that we have an onsubmit handler intercept the event and ignore it. So you'd think that there is no need to have an action defined. Not so! If you do not define an action, your submit handler will not work as expected. It will get called, but then the entire document will be reloaded.

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:

• onblur
• onchange
• onfocus
• onselect

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.