Home arrow JavaScript arrow Page 3 - Mouseover Events and Event Delegation in JavaScript

Enhancing event delegation with mouseover events - 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
 

Modifying the hands-on example that you learned in the previous section to  implement event delegation with “mouseover” events requires changing a single line of JavaScript code, and nothing else. 

To demonstrate this, below I included the respective signatures of the JavaScript functions tasked with applying this approach in conjunction with the sample HTML table created before. Here they are: 

// get target element

function getEventTarget(e){

var e=e || window.event;

return e.target || e.srcElement;

}

// check if target is a table cell

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.
getElementById&&document.createElement){

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);

}

}

}

 

As I stated before, the only change introduced to the above JavaScript code was the line that assigns a “mouseover” event to the pertinent HTML table, which  originally used a click handler. Now, with this minor modification, the cells of the table will be highlighted every time the mouse is moved over each of them. Simple to code and read, right? 

At this stage, I’m sure that you now understand how the JavaScript functions shown before do their business. So it’s time to include this behavioral layer, along with the CSS code and markup of the previous HTML table, in the same (X)HTML file. This step will complete this particular example. 

Thus, to see how this brand new file will be created, please read the last segment of this tutorial. It’s only one click away. 



 
 
>>> 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: