Using Event Delegation for Mouseover Events in List Items - Review: using click event handlers with HTML lists (
Page 2 of 4 )
Now I'd like to go over what we covered in the last article in a little more detail. We used JavaScript event delegation with a simple HTML list; now I'd like to list the full source code corresponding to the practical example created in the last article, where this approach was utilized for applying a basic highlighting effect on each item of the list in question via a single click handler.
Essentially, the example was coded as depicted below:
<!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>
Hopefully, the above example code should be clear enough to demonstrate how useful event delegation can really be for reducing the number of click handlers necessary to highlight the items of an HTML list. In this case, the background color of these items will be modified each time a mouse click occurs; this process is performed thanks to the bubbling phase of only one click handler assigned to the entire list. Not too hard to follow, right?
At this point, you should have a solid grounding in how to use event delegation with a few mouse clicks. So it’s time to learn how to implement this approach successfully with mouseovers.
This topic will be discussed in more detail in the section to come. Therefore, click on the link below and read the following segment.
/ 3 
