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

Implementing event delegation with mouseover events - 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
 

Since my plan here consists of demonstrating how to use event delegation when the mouse is placed over the items of an HTML list, Iím going to use the same list that you saw in the previous section of this tutorial. This way you can understand more easily how this approach can be employed with different mouse events.  

Hereís a basic (X)HTML file that includes the aforementioned list, along with a few simple CSS styles. Take a look at it, please:  

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

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

Iím not going to waste your valuable time explaining how the above (X)HTML file functions, since that would be completely pointless. Itís enough to say that it includes the pertinent HTML list, whose behavior naturally must be extended via some unobtrusive JavaScript.  

However, as I anticipated in the introduction, this process will be carried out by means of the event delegation approach, which in this case will be used for highlighting the items of the list by using one single ďmouseoverĒ handler.  

To illustrate more clearly how this task will be performed with JavaScript, in the following segment Iím going to build a brand new (X)HTML file, which will contain not only the HTML list created before, but the portion of JavaScript that changes the background color of the respective items.  

Now, jump ahead and read the last section of this tutorial. Weíre almost done. 



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