Event Delegation in JavaScript - The event delegation approach in action (
Page 4 of 4 )
In the segment that you just read, I defined a pair of JavaScript functions to implement the event delegation approach on a sample HTML table. However, it’s necessary to gather this JavaScript snippet, along with the CSS code and structural markup of this sample application, in one single (X)HTML file.
Therefore, here’s the signature of this sample file:
<!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>
Definitely, the above (X)HTML file now looks much better. By means of event delegation, only one click handler is required to apply the highlighting effect on each cell of the HTML table, which makes the whole application work much more efficiently. In addition, here’s a screen shot that shows how this effect is rendered by the browser:
Hopefully, this initial example gives you a clear idea of how to successfully implement event delegation in JavaScript. As always, feel free to play with all the code samples developed in this article to give you a better grounding in using this clever approach.
Final thoughts
In this first installment of the series, I introduced you to implementing event delegation in JavaScript by reducing the number of click handlers attached to an HTML table. It’s fair to say here that event delegation isn’t always so well-supported by all JavaScript events; you should be aware of this when using this technique with “mousemove” and keyboard-related events.
It can be implemented neatly with “mouseovers,” however. Thus, in the next part of this series I’ll be explaining how to use event delegation with this kind of event. Don’t miss the upcoming article!
