 JavaScript Page 4 - Mouseover Events and Event Delegation in JavaScript |
| JavaScript Page 4 - Mouseover Events and Event Delegation in JavaScript |
Putting it all together: a final (X)HTML file - JavaScriptExpressed in simple terms, JavaScript event delegation is a smart approach that permits you to reduce the number of event handlers assigned to the elements of a web page by using the bubbling phase of a specific event. With this easy-to-learn technique you can significantly improve the performance of JavaScript applications. This is the second article in a four-part series.
print this article SEARCH DEV SHED |
If you’re like me, then you'll want to see how the JavaScript code written in the previous section can be linked with the HTML table that implements a highlighting effect on its cells by using event delegation. With that idea in mind, below I included the definition of a brand new (X)HTML file that puts all of these elements together. Here’s how this file looks: <!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. 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>
That’s all for the moment. Hopefully, this last code sample is clear enough to get you started exploiting the functionality provided by event delegation in JavaScript. In this case, this technique has been used to highlight the cells of an HTML table, but naturally it can be employed easily with other web page elements. Final thoughtsOver this second chapter of the series, you learned how to take advantage of the functionality given by event delegation in JavaScript to reduce the number of “mouseover” events assigned to a sample HTML table. Indeed, this process was a no-brainer, implying that you shouldn’t have major problems implementing it with your own JavaScript programs. In the upcoming article, I’ll be discussing how to use event delegation with HTML lists, so you can see how this approach can be easily enhanced for working with different elements of a web document. Don’t miss the next part!
blog comments powered by Disqus |
|
|
|
|
|
|
|
