 JavaScript Page 4 - Event Delegation in JavaScript |
The event delegation approach in action - JavaScriptAnyone 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.
print this article SEARCH DEV SHED |
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!
blog comments powered by Disqus |
|
|
|
|
|
|
|
