Home arrow JavaScript arrow Page 2 - Using Event Delegation for Mouseover Events in List Items

Review: using click event handlers with HTML lists - JavaScript

JavaScript-based event delegation is an efficient approach that allows us to reduce the number of event handlers included in a client-side application. This naturally contributes to improving its overall performance and reliability. This technique rests its functionality on the bubbling phase triggered by a specific event. Itís very simple to learn to code in real-world conditions. This article concludes a four-part series on event delegation.

TABLE OF CONTENTS:
  1. Using Event Delegation for Mouseover Events in List Items
  2. Review: using click event handlers with HTML lists
  3. Implementing event delegation with mouseover events
  4. Event delegation in action
By: Alejandro Gervasio
Rating: starstarstarstarstar / 6
May 06, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement
 

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. 



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