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

Event delegation in action - 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
 

In the course of the previous segment, I built a primitive HTML list to demonstrate how, through a single mouseover handler, itís possible to modify the background color of its items.  

The following example code annexes a couple of JavaScript functions to the unordered list, in this way highlighting its items when the mouse is placed over each of them:  

<!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 mouseover event)</title>

<script language="javascript">

// get target element

function getEventTarget(e){

var e=e || window.event;

 return e.target || e.srcElement;

}

// check if target is a list item

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 'onmouseover' event handler to unordered list (not items)

mylist.onmouseover=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 mouseover event)</h1>

<ul id="mylist">

<li>This is an list item</li>

<li>This is an list item</li>

<li>This is an list item</li>

<li>This is an list item</li>

<li>This is an list item</li>

<li>This is an list item</li>

<li>This is an list item</li>

<li>This is an list item</li>

<li>This is an list item</li>

<li>This is an list item</li>

<li>This is an list item</li>

<li>This is an list item</li>

<li>This is an list item</li>

<li>This is an list item</li>

<li>This is an list item</li>

<li>This is an list item</li>

<li>This is an list item</li>

<li>This is an list item</li>

<li>This is an list item</li>

<li>This is an list item</li>

</ul>

</body>

</html>

 

If you analyze the above code sample closely, youíll realize that it looks very similar to the example shown in the first section, where the event delegation technique was utilized with click handlers. But in this particular case, the approach is employed in conjunction with mouseover events.  

If you test the above (X)HTML file on your web server, youíll see that the background color of each list item will be modified each time the mouse is located over it. Regardless of its simplicity, this introductory example should give you the right pointers to start incorporating event delegation within your own JavaScript programs.  

Final thoughts  

Sad but true, weíve come to the end of this series. Nonetheless, overall the experience has been educational, since you learned how to implement JavaScript event delegation with mouse clicks and mouseovers. Indeed, when used in a clever way, this approach can enhance the performance of JavaScript applications.  

A final warning before I finish: in general, event delegation is well supported by most modern browsers, but you should use it carefully with other events, including keyboard actions and mouse moves. These events might be incompatible with some browsers.  

See you in the next web development tutorial! 



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