 JavaScript Page 2 - Using Event Delegation for Mouseover Events in List Items |
| JavaScript Page 2 - Using Event Delegation for Mouseover Events in List Items |
Review: using click event handlers with HTML lists - JavaScriptJavaScript-based event delegation is an efficient approach that allows us to reduce the number of event handlers included in a client-side application. This naturally contributes to improving its overall performance and reliability. This technique rests its functionality on the bubbling phase triggered by a specific event. It’s very simple to learn to code in real-world conditions. This article concludes a four-part series on event delegation.
print this article SEARCH DEV SHED |
Now I'd like to go over what we covered in the last article in a little more detail. We used JavaScript event delegation with a simple HTML list; now I'd like to list the full source code corresponding to the practical example created in the last article, where this approach was utilized for applying a basic highlighting effect on each item of the list in question via a single click handler. Essentially, the example was coded as depicted below: <!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 (excerpted) function getEventTarget(e){ var e=e || window.event; return e.target || e.srcElement; } // check if target is a list item (excerpted) function highlightListItem(e){ var target=getEventTarget(e); if(target.tagName.toLowerCase()=='li'){ target.className='highlighted'; } } // run functions when web page has been loaded window.onload=function(){ if(document.getElementsByTagName&&document. var mylist=document.getElementById('mylist'); if(!mylist){return}; // assign 'onclick' event handler to unordered list (not items) mylist.onclick=function(e){ // determine target element and highlight list item highlightListItem(e); } } } </script> <style type="text/css"> ul{ list-style: circle; } li{ font: normal 10pt Arial, Helvetica, sans-serif; color: #000; } .highlighted{ background: #0c9; } </style> </head> <body> <h1>Event delegation in JavaScript (with click event)</h1> <ul id="mylist"> <li>This is a list item</li> <li>This is a list item</li> <li>This is a list item</li> <li>This is a list item</li> <li>This is a list item</li> <li>This is a list item</li> <li>This is a list item</li> <li>This is a list item</li> <li>This is a list item</li> <li>This is a list item</li> <li>This is a list item</li> <li>This is a list item</li> <li>This is a list item</li> <li>This is a list item</li> <li>This is a list item</li> <li>This is a list item</li> <li>This is a list item</li> <li>This is a list item</li> <li>This is a list item</li> <li>This is a list item</li> </ul> </body> </html> Hopefully, the above example code should be clear enough to demonstrate how useful event delegation can really be for reducing the number of click handlers necessary to highlight the items of an HTML list. In this case, the background color of these items will be modified each time a mouse click occurs; this process is performed thanks to the bubbling phase of only one click handler assigned to the entire list. Not too hard to follow, right? At this point, you should have a solid grounding in how to use event delegation with a few mouse clicks. So it’s time to learn how to implement this approach successfully with mouseovers. This topic will be discussed in more detail in the section to come. Therefore, click on the link below and read the following segment.
|
|
|
|
|
|
|
|
