 JavaScript Page 2 - Using HTML Lists with Event Delegation in JavaScript |
| JavaScript Page 2 - Using HTML Lists with Event Delegation in JavaScript |
Implementing event delegation with an HTML table - JavaScriptDo 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.
print this article SEARCH DEV SHED |
Before I proceed to show you how event delegation can be utilized in conjunction with HTML lists, I will list the full source code of the example developed in the previous article. It showed a basic implementation of this approach for creating highlighting effects on all of the cells of an HTML table. The hands-on example was built as follows: <!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 mouseover event)</title> <script language="javascript"> // get target element (excerpted) function getEventTarget(e){ var e=e || window.event; return e.target || e.srcElement; } // check if target is a table cell (excerpted) 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 'onmouseover' event handler to table (not cells) mytable.onmouseover=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 mouseover 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> In case the previous code sample doesn’t ring any bells for you, let me quickly explain how it works. In layman’s terms, the event delegation approach is implemented via the “getEventTarget()” and “highlightCell()” functions, which apply the highlighting effect on the table cells by assigning only one “mouseover” handler to the table. Here, it’s clear to see how useful a delegated event can be in reducing the number of event handlers required by a JavaScript application. All in all, at this point you should be familiar with the basics for using event delegation with HTML tables. So it’s time to see how this same handy technique can be utilized when working with unordered HTML lists. This subject will be discussed in depth in the course of the section to come. So, to learn more, click on the link that appears below and keep reading.
|
|
|
|
|
|
|
|
/ 4 
