Mouseover Events and Event Delegation in JavaScript (
Page 1 of 4 )
Expressed 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.Therefore, if you’re interested in learning how to implement event delegation within your own JavaScript programs, then in this group of articles you’ll find an approachable guide that will help you to master the key concepts that drive this powerful approach, with numerous code samples.
Now that you've been introduced to the subject of this series of tutorials, it’s time to quickly review the topics that I discussed in the last part. In that particular article I explained how to implement event delegation in JavaScript without being an expert in client-side scripting.
Speaking more specifically, I demonstrated an easy way to apply a basic highlighting effect on all of the cells of an HTML table. The technique involved assigning only one click handler to the table in question, instead of coding multiple ones. Essentially, this sample application took advantage of the bubbling phase of all the clicks that occurred within the HTML table to highlight a particular cell. It was that simple, really.
Nonetheless, JavaScript event delegation is also well supported by other event handlers, including the popular “mouseovers.” Therefore, in this second article of the series I’ll be explaining how to implement this approach by partially recreating the example developed previously.
Are you ready to learn how to extend the use of event delegation in JavaScript? Then let’s get started!
/ 4 
