 | JavaScript | |||
|---|---|---|---|---|
| Prev | Home | Up | Next |
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:
By placing JavaScript code in HTML tag attributes
By setting the object property for the handler
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.
Event handlers should always return true or false. However, this is not enforced and won't generate an error so it isn't always necessary and often won't cause anything to happen whichever value you return. However, this might change if the interpreter vendors tighten up their functional specifications, so it's good practice to always return a Boolean result.
Some event handlers cannot be set from a tag attribute. Those will have to be set from a script by assigning the handler to the appropriate property.
Event handling architectures differ somewhat between Netscape and MSIE. Netscape provides event routing management while the event hierarchy allows events to bubble up through the document object model. If you are doing anything other than simply handling the event through the default handler, you need to be aware of the difference.
<HTML>
<HEAD>
<SCRIPT>
function errorHandler()
{
alert("An error has occurred");
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
window.onerror = errorHandler;
</SCRIPT>
</BODY>
</HTML>| See also: | Adding JavaScript to HTML, unwatch(), watch() |
| Prev | Home | Next |
| Event bubbling | Up | Event handler in <SCRIPT> |
JavaScript Programmer's Reference, Cliff Wootton Wrox Press (www.wrox.com) Join the Wrox JavaScript forum at p2p.wrox.com Please report problems to support@wrox.com © 2001 Wrox Press. All Rights Reserved. Terms and conditions. | ||