Optimized Event Delegation in jQuery
[ More ] Apr 14, 2009 | 6 Comments | Posted in HowTo, Tech, Web Development |Often when working with large datasets, you will come across issues related to intense event overload for objects like table cells. This could translate to poor client JavaScript performance. The root cause for the performance lag is the large number of events that are associated and handled by web page at the client. Lets consider a scenario of highlighting cells in a table as follows
HTML
<table id="resultSetTable"> <tr id="row1"> <td class="nameCell"> UPS </td> <td class="priceCell"> 2500 </td> </tr> <tr id="row2"> <td class="nameCell"> Mouse</td> <td class="priceCell"> 300 </td> </tr> . . . <tr id="row859"> <td class="nameCell"> Keyboard </td> <td class="priceCell"> 250 </td> </tr> </table>
Javascript to highlight the selected cell
<script type="text/javascript">
$(function(){
$('.nameCell').click(function(){
if ($(this).css('background-color') != 'rgb(255, 0, 0)')
$(this).css('background-color', 'red');
else
$(this).css('background-color', 'green');
});
});
</script>
Although the code above works properly, the inefficiency of the above list code can be identifeid if the code is put through large datasets, since the javascript has to assign the event handler to all cells of the class “nameCell”, the Javascript engine gets overloaded with events, in a scenario of a few thousand rows, there are equal number of events being declared and handled simultaneously. This in some cases might cause the browser to crash. I got the following error when I tested this code with a large dataset on Firefox.
A script on this page may be busy, or it may have stopped responding. You can stop the script now, open the script in the debugger, or let the script continue.
Script: jquery-1.3.2.min.js:18
An alternate way to handle this problem will be to assign the event handler to a larger parent object, and to execute the event handler by validating the properties of the event. In this case the larger parent object is the Table. We can drill down to the class of the clicked cell of the table, see if it matches the ‘nameCell’ class type and then run the instructions, based on the validation. This mechanism is known as event delegation.
<script type="text/javascript">
$(function(){
$('table').click(function(event) {
var $thisCell, $tgt = $(event.target);
if ($tgt.is('td')) {
$thisCell = $tgt;
} else if ($tgt.parents('td').length) {
$thisCell = $tgt.parents('td:first');
}
// now do something with $thisCell
if ($($thisCell).attr("class")=="nameCell")
{
if ($($thisCell).css('background-color') != 'rgb(255, 0, 0)')
$($thisCell).css('background-color', 'red');
else
$($thisCell).css('background-color', 'green');
}
});
});
</script>
The web application saves lots of client computing power by avoiding the replication of thousands of events by delegating the event to a parent object. Proper use of event delegation in jQuery can help in excellent performance optimization of the web application.
References
- Working with Events by Karl Swedberg -
http://www.learningjquery.com/2008/03/working-with-events-part-1
