Using Event Delegation for Mouseover Events in List Items

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.

Therefore, if you’re a web designer who’s interested in mastering the key concepts that surround event delegation in JavaScript, this set of articles contains numerous hands-on examples that will get you started using this approach within your own client-side applications.  

And speaking of practical examples, now it’s time to review quickly the ones that were developed in the preceding article. In that particular tutorial I explained how to implement the event delegation approach to highlight the items of an unordered HTML list each time a mouse click occurred on each of them. 

This effect was accomplished by using only one single event handler, which was assigned to the whole list and not to each of its items, as you might have supposed initially. 

The flexibility of the event delegation technique permits us to work with  JavaScript events other than mouse clicks. In this final installment of the series, I’ll be discussing how to implement this approach for handling mouseovers with the same sample HTML list that you saw in the previous part, thus completing this introductory overview of delegated events in JavaScript.  

Having introduced you to the subject of this last tutorial, it’s time to continue learning about JavaScript event delegation, right? Then start reading now! 

{mospagebreak title=Review: using click event handlers with HTML lists} 

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. 

{mospagebreak title=Implementing event delegation with mouseover events} 

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. 

{mospagebreak title=Event delegation in action} 

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! 

[gp-comments width="770" linklove="off" ]
antalya escort bayan antalya escort bayan