Home arrow JavaScript arrow Mouseover Events and Event Delegation in JavaScript

Mouseover Events and Event Delegation in JavaScript

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.

TABLE OF CONTENTS:
  1. Mouseover Events and Event Delegation in JavaScript
  2. Review: JavaScript event delegation with click handlers
  3. Enhancing event delegation with mouseover events
  4. Putting it all together: a final (X)HTML file
By: Alejandro Gervasio
Rating: starstarstarstarstar / 6
April 22, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

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!  



 
 
>>> More JavaScript Articles          >>> More By Alejandro Gervasio
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: