Home arrow JavaScript arrow Page 2 - Mouseover Events and Event Delegation in JavaScript

Review: JavaScript event delegation with click handlers - 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.

TABLE OF CONTENTS:
  1. Mouseover Events and Event Delegation in JavaScript
  2. Review: JavaScript event delegation with click handlers
  3. Enhancing event delegation with mouseover events
  4. Putting it all together: a final (X)HTML file
By: Alejandro Gervasio
Rating: starstarstarstarstar / 6
April 22, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement
 

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.  



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