Home arrow JavaScript arrow Page 2 - Event Delegation in JavaScript

What you shouldn’t do with JavaScript event handlers - JavaScript

Anyone who has spent a long time building JavaScript applications knows how important event handlers can be for processing certain common user actions, such as mouse clicks, windows and keyboard events, and so forth. However, while event handlers are a powerful feature for creating highly responsive JavaScript programs with relative ease, they have been overused way too frequently. This has implications for how quickly certain kinds of JavaScript programs run. Fortunately, JavaScript event delegation can help solve many of these problems. This four-part series explains how.

TABLE OF CONTENTS:
  1. Event Delegation in JavaScript
  2. What you shouldn’t do with JavaScript event handlers
  3. Taking advantage of JavaScript event delegation
  4. The event delegation approach in action
By: Alejandro Gervasio
Rating: starstarstarstarstar / 5
April 15, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

A good place to start demonstrating the real benefits to using JavaScript event delegation is with recreating the hypothetical situation discussed in the introduction, where one click handler is inefficiently assigned to each cell of an HTML table.  

In this particular case, the purpose of doing this is to create a simple highlighting effect on all of the table cells. This example could be implemented with the following code:  

<!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>Classic event handling with JavaScript</title>

<script language="javascript">

// highlight table cells when web page has been loaded

window.onload=function(){

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

// get target table

var mytable=document.getElementById('mytable');

if(!mytable){return};

// get cells in target table

var cells=mytable.getElementsByTagName('td');

if(!cells){return};

// assign 'onclick' event handler to each table cell

for(var i=0;i<=cells.length;i++){

cells[i].onclick=function(){

this.className='highlighted';

}

}

}

}

</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>Classic event handling with JavaScript</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> 

Despite its simplicity, the above example shows how to build a JavaScript-based highlighting effect by assigning a click handler to each cell of an HTML table. As you can see, every time a user clicks on an individual cell, a “highlight” CSS class will be tied to it, thus achieving the effect. 

Logically, the down side to using this approach is that if the HTML table contains a large number of cells, then the browser will be obligated to process the same number of click handlers, which may seriously slow the performance of computers with a limited amount of RAM. 

Okay, now that you've learned the “bad” way to work with JavaScript event handlers, it’s time to see how the previous example can be partially rebuilt by taking advantage of the functionality provided by event delegation.  

To see how this brand new example will be developed, please click on the link that appears 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: