Event handler (Definition)

A script function that is called in response to an event trigger.

Property/method value type:Boolean primitive

Each event is associated with a handler. By default a null handler is assigned to the event so it appears that nothing happens when the event fires. It's likely that inside the interpreter the event is processed and simply calls a handler that returns straight away. You can replace that handler as the page content is processed.

Event handlers are associated with objects in the following ways:

An event handler should conform to the following pattern:

   function checkValue(anObject)
      \\ someCode...
      return true;

The object that is passed to the handler is an Event object that describes the event that has called the handler. This was not always supported and so may be null in some implementations. It was introduced with Netscape version 4.0.

When building a page, it is sensible to place the handler functions in the <HEAD> block. You can do script driven property assignments to attach the handler to the objects, but that cannot take place until the page is almost complete. It is far more sensible to use the HTML tag attribute to attach the handler function where it is needed. It also keeps everything to do with that tag and its attributes in one place. The other disadvantage to script assigning the handler to a property is that the document tree needs to be walked. This can sometimes take a while and can be problematical if the </BODY> tag closure has not yet been processed. Legally you cannot place anything after a </BODY> closure. The only way then to ensure something happens when the <BODY> block is closed is to execute it under the <BODY ONLOAD="..."> handler. But then why do that if you won't use tag attributes for the <INPUT> handlers.

If you want to, you can include the entire script of the event handler code at the point where it is associated with the HTML tag. However, this then prevents reuse and becomes hard to manage. It is better to gather the event handling logic into a single named function, organized so that it has everything it needs to process that event. Then, simply reference the function in the tag attribute that is associated with the event.

Event handlers should be designed to execute quickly and return. This is because, by their nature, they are part of the User Interface feedback process and anything that slows down the interaction between the user and the web page tends to frustrate the user and makes the application hard to use. You can let the user know that an action may take a while to complete. Even better, maybe you can create a progress indicator to show them how it's doing.

Event handlers may be invoked sooner than you expect them to be. Certainly, it is possible for them to be triggered before the page is fully loaded into the browser. Be careful that a prematurely triggered event handler does not try to manipulate objects that do not yet exist.

Event handler functions should return Boolean true or false depending on what action you want the host environment to take following your event handler's processing of the event.


Example code:

   function errorHandler()
      alert("An error has occurred");
   window.onerror = errorHandler;

See also:Adding JavaScript to HTML, unwatch(), watch()


Wrox Instant JavaScript - page - 52