Eavesdropping on Events

Advanced

It’s time to organize a way to delve more deeply into what happens when an event is fired. It’s pretty easy to set up an application that displays events for specific HTML form elements (picking from the objects and events shown in Table 8-1 of this chapter).

In other words, the program we’ll create tells you what events have been fired in response to which user actions and in what order.

For this example, let’s set up a form with some text boxes—and see what events are triggered when the user enters text in them. We can also check to see what key was pressed (using the keyCode property) and whether the Alt, Control, or Shift keys were pressed.

Here’s the HTML form that we’ll use (table tags used for formatting have been omitted for clarity):

 <FORM name="theForm">  Enter Your First Name: <INPUT type=text name="userFname">  Enter Your Last Name: <INPUT type=text name="userLname">  Enter Your Profession: <INPUT type=text name="userProf">  Enter Your City:           <INPUT type=text name="userCity"> <INPUT type=button name="theButton" value="Start"     onClick="startForm();"> </FORM> 

Note that this form contains a Start button. Clicking the Start button will start the event monitor by calling the startForm function.

Next, to manage the event monitor, we’ll need a second browser window. The reason for this is that you can’t receive events in a browser window without the possibility of the event reception itself triggering other events. This kind of cascading event sequence can make it difficult to see the original event. So we’re better off displaying events as they’re fired in a new browser window.

Note

Because the events we’re tracking in this example are fired by four specific text boxes, we could display the events elsewhere on the page (for example, in a <textarea>) without causing events to cascade. But it’s still a better practice to use a separate window as a monitor.

To do this, at the beginning of the program that will be used to monitor the events, use the window.open method to open a new window and set up a variable, doc, to refer to the document loaded in that window:

 var newWin = window.open("","MonitorEvents","width=300, height=500");  var doc = newWin.document; 

You can add a function that actually displays the events fired, and the event properties, with slight differences between Internet Explorer events and every other browser’s event:

 function handler(e){     if (Netscape.appName == "Microsoft Internet Explorer"){        e = window.event;        doc.writeln("Event Type: " + e.type);        if (e.keyCode) doc.writeln("Keycode: " +  String.fromCharCode(e.keyCode));        if (e.altKey) doc.writeln("Alt Key: " + e.altKey);        if (e.ctrlKey) doc.writeln("Ctrl Key: " + e.ctrlKey);        if (e.shiftKey) doc.writeln("Shift Key: " + e.shiftKey);     }     else   {        doc.writeln("Event Type: " + e.type);        if (e.target) doc.writeln("Target: " +           Object.prototype.toString.apply(e.target));        if (e.target.name) doc.writeln("Target Name: " + e.target.name);        if (e.which) doc.writeln("Which: " + String.fromCharCode(e.which));        if (e.modifiers) doc.writeln("Modifiers: " + e.modifiers);      }  } 

You’ve already seen how the Explorer event object properties work, but you may be curious about the Netzilla’s event properties. Some of these are shown in Table 8-3.

Table 8-3: Selected Non-Explorer (Mozilla and Netscape) Event Object Properties

Event Property	Meaning
modifiers	Applies to keyboard, for example, Shift, Control, and so on
target	The object that fired the event
type	The type of event fired
which	Which key or mouse button was clicked

Here’s code that assigns the handler function to the specified events of an object, named, logically enough, addhandlers:

 function addhandlers(o){     o.onblur = handler;     o.onchange = handler;     o.onfocus = handler;     o.onkeydown = handler;     o.onkeypress = handler;     o.onkeyup = handler;  } 

The implication of this code is that whenever an object is passed to the addhandlers function, the specified handlers are assigned the handler function as a value. Instead of doing what the event would normally do, it’s now processing the handler function and revealing itself to use. This is the perfect program for event voyeurs!

Finally, the startForm function calls the addhandlers function for each of the text boxes we want to peep at:

 function startForm(){     addhandlers(document.theForm.userLname);     addhandlers(document.theForm.userFname);     addhandlers(document.theForm.userProf);     addhandlers(document.theForm.userCity);  } 

You’ll find the complete code for this application in Listing 8-4.

Listing 8.4: Tracking Text Box Events Using an Event Monitor

 <HTML> <HEAD> <TITLE>Text Input Events</TITLE> </HEAD> <BODY> <SCRIPT>  var newWin = window.open("","MonitorEvents","width=300, height=500");  var doc = newWin.document;  function handler(e){     if (Netscape.appName == "Microsoft Internet Explorer"){        e = window.event;        doc.writeln("Event Type: " + e.type);        if (e.keyCode) doc.writeln("Keycode: " +           String.fromCharCode(e.keyCode));        if (e.altKey) doc.writeln("Alt Key: " + e.altKey);        if (e.ctrlKey) doc.writeln("Ctrl Key: " + e.ctrlKey);        if (e.shiftKey) doc.writeln("Shift Key: " + e.shiftKey);     }     else   {        doc.writeln("Event Type: " + e.type);        if (e.target) doc.writeln("Target: " +           Object.prototype.toString.apply(e.target));        if (e.target.name) doc.writeln("Target Name: " + e.target.name);        if (e.which) doc.writeln("Which: " +  String.fromCharCode(e.which));        if (e.modifiers) doc.writeln("Modifiers: " +  e.modifiers);     }  }  function addhandlers(o){     o.onblur = handler;     o.onchange = handler;     o.onfocus = handler;     o.onkeydown = handler;     o.onkeypress = handler;     o.onkeyup = handler;  }  function startForm(){     addhandlers(document.theForm.userLname);     addhandlers(document.theForm.userFname);     addhandlers(document.theForm.userProf);     addhandlers(document.theForm.userCity);  }  </SCRIPT> <FORM name="theForm"> <TABLE> <tr> <td>  Enter Your First Name:  </td> <td> <INPUT type=text name="userFname"> </td> <td> </tr> <tr> <td>  Enter Your Last Name:  </td> <td> <INPUT type=text name="userLname"> </td> <td> </tr> <tr> <td>  Enter Your Profession:  </td> <td> <INPUT type=text name="userProf"> </td> <td> </tr> <tr> <td>  Enter Your City:  </td> <td> <INPUT type=text name="userCity"> </td> </tr> <tr> <td colspan=2> <INPUT type=button name="theButton" value="START THE THING"  onClick="startForm();"> </td> </tr> </TABLE> </FORM> </BODY> </HTML> 

It’s time to take it for a spin! Figure 8-7 shows event spying in Mozilla, Figure 8-8 shows the secret life of events in Netscape, and Figure 8-9 shows your favorite events in Explorer.

Figure 8-7: Watching events fired by the text boxes in Mozilla

Figure 8-8: Watching events fired by the text boxes in Netscape

Figure 8-9: Watching events fired by the text boxes in Internet Explorer