Mouseover Events and Event Delegation in JavaScript

Expressed in simple terms, JavaScript event delegation is a smart approach that permits you to reduce the number of event handlers assigned to the elements of a web page by using the bubbling phase of a specific event. With this easy-to-learn technique you can significantly improve the performance of JavaScript applications. This is the second article in a four-part series.

Therefore, if you’re interested in learning how to implement event delegation within your own JavaScript programs, then in this group of articles you’ll find an approachable guide that will help you to master the key concepts that drive this powerful approach, with numerous code samples. 

Now that you’ve been introduced to the subject of this series of tutorials, it’s time to quickly review the topics that I discussed in the last part. In that particular article I explained how to implement event delegation in JavaScript without being an expert in client-side scripting. 

Speaking more specifically, I demonstrated an easy way to apply a basic highlighting effect on all of the cells of an HTML table. The technique involved assigning only one click handler to the table in question, instead of coding multiple ones. Essentially, this sample application took advantage of the bubbling phase of all the clicks that occurred within the HTML table to highlight a particular cell. It was that simple, really. 

Nonetheless, JavaScript event delegation is also well supported by other event handlers, including the popular “mouseovers.” Therefore, in this second article of the series I’ll be explaining how to implement this approach by partially recreating the example developed previously. 

Are you ready to learn how to extend the use of event delegation in JavaScript? Then let’s get started!  

{mospagebreak title=Review: JavaScript event delegation with click handlers} 

Before I proceed to explain how to implement event delegation with “mouseover” events, let’s recall how to use it with mouse clicks. I’m going to list the entire source code corresponding to the hands-one example developed in the preceding article of the series, in case you haven’t had the chance to read it. 

That being said, here’s an (X)HTML file that implements event delegation with mouse clicks. 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 click 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 table cell

function highlightCell(e){

var target=getEventTarget(e);

if(target.tagName.toLowerCase()===’td’) {

target.className=’highlighted';

}

}

// run functions when web page has been loaded

window.onload=function(){

if(document.getElementsByTagName&&document.
getElementById&&document.createElement){

var mytable=document.getElementById(‘mytable’);

if(!mytable){return};

// assign ‘onclick’ event handler to table (not cells)

mytable.onclick=function(e){

// determine target element and highlight table cell

highlightCell(e);

}

}

}

</script>

<style type="text/css">

table{

width: 500px;

border: 1px solid #000;

}

td{

font: normal 10pt Arial, Helvetica, sans-serif;

color: #000;

background: #9fc;

border: 1px solid #000;

}

.highlighted{

background: #0c9;

}

</style>

</head>

<body>

<h1>Event delegation in JavaScript (with click event)</h1>

<table id="mytable">

<tr>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

</tr>

<tr>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

</tr>

<tr>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

</tr>

<tr>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

</tr>

<tr>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

</tr>

<tr>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

</tr>

<tr>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

</tr>

<tr>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

</tr>

<tr>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

</tr>

<tr>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

</tr>

</table>

</body>

</html>

 

As you can see, the above (X)HTML file demonstrates how useful event delegation can be for reducing the number of event handlers that must be assigned to certain elements of a web page. In this case, this approach is put to work with an HTML table to highlight its cells as they’re clicked on successively.  

At first, it seems as if multiple click handlers had to be attached to the cells of the table, but thanks to the use of event delegation, only one was assigned to the table. On the other hand, the combination of the “getEventTarget()” and “highlightCell()” functions determined in which table cell the click occurred, by means of this event’s bubbling phase.  

Now that you’ve recalled how the previous example functioned, it’s time to see how it can be partially rebuilt to work with “mouseover” events.  

This topic will be discussed in detail in the section to come. Thus, click on the link shown below and keep reading.  

{mospagebreak title=Enhancing event delegation with mouseover events} 

Modifying the hands-on example that you learned in the previous section to  implement event delegation with “mouseover” events requires changing a single line of JavaScript code, and nothing else. 

To demonstrate this, below I included the respective signatures of the JavaScript functions tasked with applying this approach in conjunction with the sample HTML table created before. Here they are: 

// get target element

function getEventTarget(e){

var e=e || window.event;

return e.target || e.srcElement;

}

// check if target is a table cell

function highlightCell(e) {

var target=getEventTarget(e);

if(target.tagName.toLowerCase()==’td’) {

target.className=’highlighted';

}

}

// run functions when web page has been loaded

window.onload=function(){

if(document.getElementsByTagName&&document.
getElementById&&document.createElement){

var mytable=document.getElementById(‘mytable’);

if(!mytable){return};

// assign ‘onmouseover’ event handler to table (not cells)

mytable.onmouseover=function(e){

// determine target element and highlight table cell

highlightCell(e);

}

}

}

 

As I stated before, the only change introduced to the above JavaScript code was the line that assigns a “mouseover” event to the pertinent HTML table, which  originally used a click handler. Now, with this minor modification, the cells of the table will be highlighted every time the mouse is moved over each of them. Simple to code and read, right? 

At this stage, I’m sure that you now understand how the JavaScript functions shown before do their business. So it’s time to include this behavioral layer, along with the CSS code and markup of the previous HTML table, in the same (X)HTML file. This step will complete this particular example. 

Thus, to see how this brand new file will be created, please read the last segment of this tutorial. It’s only one click away. 

{mospagebreak title=Putting it all together: a final (X)HTML file} 

If you’re like me, then you’ll want to see how the JavaScript code written in the previous section can be linked with the HTML table that implements a highlighting effect on its cells by using event delegation. With that idea in mind, below I included the definition of a brand new (X)HTML file that puts all of these elements together. Here’s how this file looks: 

<!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 (excerpted)

function getEventTarget(e){

var e=e || window.event;

return e.target || e.srcElement;

}

// check if target is a table cell (excerpted)

function highlightCell(e) {

var target=getEventTarget(e);

if(target.tagName.toLowerCase()===’td’) {

target.className=’highlighted';

}

}

// run functions when web page has been loaded

window.onload=function(){

if(document.getElementsByTagName&&document.
getElementById&&document.createElement){

var mytable=document.getElementById(‘mytable’);

if(!mytable){return};

// assign ‘onmouseover’ event handler to table (not cells)

mytable.onmouseover=function(e){

// determine target element and highlight table cell

highlightCell(e);

}

}

}

</script>

<style type="text/css">

table{

width: 500px;

border: 1px solid #000;

}

td{

font: normal 10pt Arial, Helvetica, sans-serif;

color: #000;

background: #9fc;

border: 1px solid #000;

}

.highlighted{

background: #0c9;

}

</style>

</head>

<body>

<h1>Event delegation in JavaScript (with mouseover event)</h1>

<table id="mytable">

<tr>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

</tr>

<tr>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

</tr>

<tr>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

</tr>

<tr>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

</tr>

<tr>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

</tr>

<tr>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

</tr>

<tr>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

</tr>

<tr>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

</tr>

<tr>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

</tr>

<tr>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

</tr>

</table>

</body>

</html>

 

That’s all for the moment. Hopefully, this last code sample is clear enough to get you started exploiting the functionality provided by event delegation in JavaScript. In this case, this technique has been used to highlight the cells of an HTML table, but naturally it can be employed easily with other web page elements.  

Final thoughts 

Over this second chapter of the series, you learned how to take advantage of the functionality given by event delegation in JavaScript to reduce the number of “mouseover” events assigned to a sample HTML table. Indeed, this process was a no-brainer, implying that you shouldn’t have major problems implementing it with your own JavaScript programs. 

In the upcoming article, I’ll be discussing how to use event delegation with HTML lists, so you can see how this approach can be easily enhanced for working with different elements of a web document. Don’t miss the next part!

[gp-comments width="770" linklove="off" ]

antalya escort bayan antalya escort bayan Antalya escort diyarbakir escort