Using HTML Lists with Event Delegation in JavaScript (
Page 1 of 4 )
Do you enjoy the responsiveness that using event handlers in JavaScript adds to your web site, but feel concerned about the way they can slow down your applications? Fear not; this four-part article series covers event delegation, a technique that can solve this problem in certain situations. This article is the third part of the series.Event handlers play a fundamental role within any JavaScript application, since they keep track of mouse clicks, keyboard and window events, and so forth. Logically, their existence permits us to develop client-side programs that are much more responsive than an application running in the web server.
However, when overused, event handlers can seriously slow down the performance of a JavaScript program, and in extreme cases can produce complete system hang-ups. Yet, in certain situations (not all) it’s possible to reduce the number of event handlers that will be used within a particular JavaScript application by means of a handy technique known popularly as event delegation.
Essentially, this approach takes advantage of the bubbling phase of a JavaScript event to detect which specific element of a web page triggered that particular event. Obviously, this allows you to decrease dramatically the number of handlers that need to be coded within a particular program, improving its performance and reliability.
Of course, if you've already read the preceding installment of this series, you understand the key concepts that surround the implementation of event delegation in JavaScript. In that tutorial I explained how to create a highlighting effect on the cells of an HTML table, by using one single “mouseover” event handler.
Even though this hands-on example was rather simplistic, it illustrated how useful event delegation can be for building compact, efficient JavaScript programs. Nevertheless, the flexibility provided by this approach allows us to implement it with web page elements other than tables.
Therefore, in this third part of the series I’ll be explaining how to implement event delegation with HTML lists. Want to learn more about this topic? Then start reading the next section.
