Using HTML Lists with Event Delegation in JavaScript - Adding a simple behavior to the HTML list (
Page 4 of 4 )
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!
