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:

By: Alejandro Gervasio

Poor Best

Rating:

/ 4

April 29, 2009

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

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

<head>

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

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

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>

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