Home arrow JavaScript arrow Page 3 - Using HTML Lists with Event Delegation in JavaScript

Working with unordered HTML lists for event delegation - 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.

TABLE OF CONTENTS:
  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
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement
 

In the segment that you just read, you learned how to implement JavaScript event delegation on a simple HTML table. As I said before, this approach can be used with practically any element of a web document, as long as it supports event assignment.

Naturally, when I talk about any element of a web page, Iím including HTML lists too. Thus, in the next few lines Iím going to define a brand new (X)HTML file, comprised of a basic unordered list. Then, with this file available for testing purposes, Iím going to implement the event delegation approach on the list, so you can see how this technique can be used with other web page elements.

That being explained, here is the file that builds the pertinent HTML list:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Example on JavaScript Event Delegation (with click event)</title>

<style type="text/css">

ul{

list-style: circle;

}

li{

font: normal 10pt Arial, Helvetica, sans-serif;

color: #000;

}

.highlighted{

background: #0c9;

}

</style>

</head>

<body>

<h1>Event delegation in JavaScript (with click event)</h1>

<ul id="mylist">

<li>This is a list item</li>

<li>This is a list item</li>

<li>This is a list item</li>

<li>This is a list item</li>

<li>This is a list item</li>

<li>This is a list item</li>

<li>This is a list item</li>

<li>This is a list item</li>

<li>This is a list item</li>

<li>This is a list item</li>

<li>This is a list item</li>

<li>This is a list item</li>

<li>This is a list item</li>

<li>This is a list item</li>

<li>This is a list item</li>

<li>This is a list item</li>

<li>This is a list item</li>

<li>This is a list item</li>

<li>This is a list item</li>

<li>This is a list item</li>

</ul>

</body>

</html>

Since the above (X)HTML file is extremely simple to grasp, Iím not going to bore you explaining how it works. The only detail to note here is that it includes an unordered list, comprised of a few items. Thatís all.

However, hereís where things get really interesting, since itís possible to create a JavaScript program that dynamically changes the background color of each list item in response to mouse clicks. Of course, at first sight it seems that multiple click handlers will need to be assigned to the items to accomplish this task, but that's not necessary when using event delegation.

By following an approach similar to the one that you learned when working with HTML tables, itís feasible to assign only one click handler to the whole list, and then via event delegation, determine which item was clicked on.

Therefore, in the last section Iím going to define the JavaScript functions responsible for implementing event delegation on the HTML list you saw above. So go ahead and read the following lines.



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

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

- 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: