Event Delegation in JavaScript - What you shouldn’t do with JavaScript event handlers (
Page 2 of 4 )
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.
