WebReference.com - Current Events: a Client-Side Tipsheet (1/2)

[next]

Current Events: A Client Side Tipsheet

By Kenneth Tibbetts ([email protected])

There are nearly always events on Web pages--even the simplest pages--and these events always have to be handled, somehow, by the client software. Hyperlinks and anchors have been around since the beginnings of the Web. Forms, with their input text boxes, options lists and buttons are still a common way to facilitate a user's interaction with a site.

Hyperlinks and forms do most of their stuff on the server, but it is important to not lose sight of the fact that nothing happens before the browser deals with the user input--mousing over a link lights up the link, say, and writes the URL to the status bar. Clicking submit calls a function on the browser before sending anything to be processed. Even on clients that don't do scripting you have a fairly hefty amount of event handling going on.

There may be a basic functionality you want to give your pages for users with older browsers, and for these clients, links and forms are it. By keeping your HTML simple, and adding functionality through scripts, you ensure that every visitor will get the most out of the page.

And even in the most modern browser, bulging with muscular methods and more properties than Masterpiece Theater, using links and forms is often the best way to get users to interact with the page. They are familiar elements; the visitor knows immediately what to do.

A nice thing about the new browsers is they support events on just about any HTML element you can think of. Event handling, however, is not much different than it was yesterday. It is still a browser specific, not quite standardized porridge of incompatable methods and properties. I use the DOM recommendations as much as I can, but in the area of event handling, we are still pretty much on our own. I'll give you a few examples.

Most of the time today, the best way to set up an event handler is the simplest, and the oldest--set a property of an HTML element. This code will work in most browsers:

document.links[0].onmouseover=writeStatus;
// where writeStatus is a function that 
// handles a mouseover event:
function writeStatus(e){
   var thisStatus=Eve(e).href.pathName;
   var ax=thisStatus.lastIndexOf('\/')+1;
   if(ax!=-1) thisStatus=thisStatus.substring(ax);
   window.status= thisStatus;
   return true;
}

Note that you don't define the argument (e).

The argument is the sniffer--Netscape Navigator and N6/ Mozilla automatically pass an argument for each event. This is basically the DOM scheme as well. IE doesn't pass an argument, but every event instantiates a global window.event object.

You could handle your events in the first lines of every function you write; but save yourself some typing. Putting a few generic event handlers in your code makes it easy to keep up with the vendors--change once, read many.

Call on an event examiner for the details you need about the event. Most often I want to know what element has triggered the event, which is Eve's specialty.

Who is it?

function Eve(e){
   var trigger='';
   if(!e && event.srcElement) trigger= event.srcElement;
   else if(e.target) trigger= e.target;
   if (trigger.nodeType && trigger.nodeType== 3)
      trigger= trigger.parentNode;
   return trigger;
}

If there is an argument (e) you know you have an event argument to work with. Otherwise see if you are working with IE. The DOM is gonna use target and currentTarget (more on this on page 2), Netscape 4 and Opera use target, and IE has the lovely srcElement.

Whichever, the browser examines the event and returns a reference to the element that triggered it.

If you need to use the DOM event phase, which captures events on the way up or down through the document, precede the e.target branch with:

else if(e.currentTarget) trigger=e.currentTarget

I rarely use it, but probably will when IE gets on board.

I have used this little function for years. It works in everything from Netscape's version 3 on. I have added a line for DOM aware browsers, to bump up a text node to its parent, because most of the time I work on the element level. But I like to keep it as simple as possible, and as such it gets called a lot.

[next]

Created: April 10, 2002
Revised: April 10, 2002

URL: https://webreference.com/programming/javascript/events/