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

Adding a simple behavior to the HTML list - 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 previous segment I coded a basic HTML list, so now itís time to implement the event delegation approach to create a highlighting effect on each of its items when they are clicked. In this case, instead of assigning an individual click handler per item, only one will be attached to the whole list.

The following segment of code performs the aforementioned task:

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

<script language="javascript">

// get target element (excerpted)

function getEventTarget(e){

var e=e || window.event;

 return e.target || e.srcElement;

}

// check if target is a list item (excerpted)

function highlightListItem(e){

var target=getEventTarget(e);

if(target.tagName.toLowerCase()=='li'){

target.className='highlighted';

}

}

// run functions when web page has been loaded

window.onload=function(){

if(document.getElementsByTagName&&document.getElementById&&document.createElement){

var mylist=document.getElementById('mylist');

if(!mylist){return};

// assign 'onclick' event handler to unordered list (not items)

mylist.onclick=function(e){

// determine target element and highlight list item

highlightListItem(e);

}

}

}

</script>

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

As illustrated before, only a few short JavaScript functions are required to implement the event delegation approach with the above HTML list. In this example, each time a list item is clicked on, its background color will change. Naturally, the most important detail to note here is that this simple effect is achieved by assigning one click handler to the list. Hereís a screen capture that shows how the items of the previous list are highlighted as theyíre clicked on:

This final example concludes this article on using event delegation with JavaScript. As always, feel free to tweak all of the code samples developed in this article to give you more practice in implementing this useful approach within your own JavaScript programs.

Final thoughts

In this third article of the series, I explained how to extend the implementation of JavaScript event delegation to other elements of a web page, such as a simple HTML list. Nonetheless, this educational journey hasnít fished yet; in the final chapter, Iíll be discussing how to modify the JavaScript application developed previously, so it can respond to ďmouseoverĒ events.

Now that you know what the upcoming article will be about, you simply canít miss it!



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