 JavaScript Page 2 - Event Delegation in JavaScript |
What you shouldn’t do with JavaScript event handlers - 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 |
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.
blog comments powered by Disqus |
|
|
|
|
|
|
|
