Home arrow JavaScript arrow Page 2 - Interactive Effects

Ajax-Friendly Event Handling - JavaScript

If you're looking for a quick way to delight your visitors with the addition of Ajax to your site, look no further. This article, the first part of a four-part series, will show you how to do some very nice interactive effects. It is excerpted from chapter four of Adding Ajax, written by Shelley Powers (O'Reilly, 2007; ISBN: 0596529368). Copyright 2007 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

  1. Interactive Effects
  2. Ajax-Friendly Event Handling
  3. Mashable Event Handling
  4. The Dojo Event System and the Target Object
By: O'Reilly Media
Rating: starstarstarstarstar / 7
September 20, 2007

print this article



Event handlers have been part of JavaScript from the beginning. Most follow the onclick or onload format, where the handler begins with the keyword on, followed by the event name. Typically, the event handlers are placed within the object to which they're connected:

  <body onload="somefunction()">

Inline event handlers are still viable approaches for managing event capturing, except for two limitations: maintenance and mashability.

Maintainable Event Handling

If event handlers are added directly to page elements, and later there's a change to the function name or parameters, the web developer has to hunt down every occurrence of the load handler text and modify it. This approach of adding event handling isn't efficient, and with today's more complex and dynamically generated web pages, it's infeasible.

An exception to this premise is dynamically generated content, where the code to create the content is located in one file. Though the generated content can stretch across many pages, you still only have to make changes in one place.

Rather than adding event handlers to objects, a better approach is to assign event handler functions in a scripting block, either in a separate JavaScript file or as a block of code in the head section of a document. This is known as the DOM level 0 event handling approach:

  <script type="text/javascript">

This is also a viable solution, but another problem arises when you assign a function to an event handler. In the example just given, assigning someFunction to the onclick event handler for the document object overwrites whatever other assignment has been made before this script is run. If you're incorporating external Ajax libraries or merging multiple Ajax libraries into an application, you can't assume that you "own" the event handler. Your code has to play well with others, unless you want to restrict all code to your code and your code only.

>>> More JavaScript Articles          >>> More By O'Reilly Media

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates


Dev Shed Tutorial Topics: