Home arrow JavaScript arrow Using HTML Lists with Event Delegation in JavaScript

Using HTML Lists with Event Delegation in JavaScript

Do you enjoy the responsiveness that using event handlers in JavaScript adds to your web site, but feel concerned about the way they can slow down your applications? Fear not; this four-part article series covers event delegation, a technique that can solve this problem in certain situations. This article is the third part of the series.

  1. Using HTML Lists with Event Delegation in JavaScript
  2. Implementing event delegation with an HTML table
  3. Working with unordered HTML lists for event delegation
  4. Adding a simple behavior to the HTML list
By: Alejandro Gervasio
Rating: starstarstarstarstar / 4
April 29, 2009

print this article



Event handlers play a fundamental role within any JavaScript application, since they keep track of mouse clicks, keyboard and window events, and so forth. Logically, their existence permits us to develop client-side programs that are much more responsive than an application running in the web server.

However, when overused, event handlers can seriously slow down the performance of a JavaScript program, and in extreme cases can produce complete system hang-ups. Yet, in certain situations (not all) it’s possible to reduce the number of event handlers that will be used within a particular JavaScript application by means of a handy technique known popularly as event delegation.

Essentially, this approach takes advantage of the bubbling phase of a JavaScript event to detect which specific element of a web page triggered that particular event. Obviously, this allows you to decrease dramatically the number of handlers that need to be coded within a particular program, improving its performance and reliability.

Of course, if you've already read the preceding installment of this series, you understand the key concepts that surround the implementation of event delegation in JavaScript. In that tutorial I explained how to create a highlighting effect on the cells of an HTML table, by using one single “mouseover” event handler.

Even though this hands-on example was rather simplistic, it illustrated how useful event delegation can be for building compact, efficient JavaScript programs. Nevertheless, the flexibility provided by this approach allows us to implement it with web page elements other than tables.

Therefore, in this third part of the series I’ll be explaining how to implement event delegation with HTML lists. Want to learn more about this topic? Then start reading the next section. 

>>> More JavaScript Articles          >>> More By Alejandro Gervasio

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: