Using Event Delegation for Mouseover Events in List Items (
Page 1 of 4 )
JavaScript-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.Therefore, if you’re a web designer who’s interested in mastering the key concepts that surround event delegation in JavaScript, this set of articles contains numerous hands-on examples that will get you started using this approach within your own client-side applications.
And speaking of practical examples, now it’s time to review quickly the ones that were developed in the preceding article. In that particular tutorial I explained how to implement the event delegation approach to highlight the items of an unordered HTML list each time a mouse click occurred on each of them.
This effect was accomplished by using only one single event handler, which was assigned to the whole list and not to each of its items, as you might have supposed initially.
The flexibility of the event delegation technique permits us to work with JavaScript events other than mouse clicks. In this final installment of the series, I’ll be discussing how to implement this approach for handling mouseovers with the same sample HTML list that you saw in the previous part, thus completing this introductory overview of delegated events in JavaScript.
Having introduced you to the subject of this last tutorial, it’s time to continue learning about JavaScript event delegation, right? Then start reading now!
/ 3 
