Home arrow JavaScript arrow Page 3 - Event Delegation in JavaScript

Taking advantage of JavaScript event delegation - JavaScript

Anyone who has spent a long time building JavaScript applications knows how important event handlers can be for processing certain common user actions, such as mouse clicks, windows and keyboard events, and so forth. However, while event handlers are a powerful feature for creating highly responsive JavaScript programs with relative ease, they have been overused way too frequently. This has implications for how quickly certain kinds of JavaScript programs run. Fortunately, JavaScript event delegation can help solve many of these problems. This four-part series explains how.

TABLE OF CONTENTS:
  1. Event Delegation in JavaScript
  2. What you shouldn’t do with JavaScript event handlers
  3. Taking advantage of JavaScript event delegation
  4. The event delegation approach in action
By: Alejandro Gervasio
Rating: starstarstarstarstar / 5
April 15, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement
 

As you hopefully learned at the beginning of this article, event delegation rests its functionality on the “bubbling” phase of a particular JavaScript event. In a case like the example created in the previous section, it’s perfectly possible (and desirable, actually) to utilize it to attach only one click handler to the whole HTML table, and later on, determine what cell triggered that specific event. 

To accomplish that task in a simple fashion, I’m going to define a couple of JavaScript functions. The first one will be tasked with determining which element of the web page is the source of a specific event, and the second one will be charged with checking to see if this element is a table cell. If it is, then the highlight effect will be applied to it. That’s it.  

The signature of these JavaScript functions are as following: 

// 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';

}

}

As I explained before, all that the first “getEventTarget()” function does is return the source of the web page element that fires a specific event, while the second function, called “highlightCell(),” not surprisingly checks to see if the returned element is a cell table. If this is true, then the “highlighted” CSS class is tied up to it. 

So what have we achieved in using this approach? Quite a bit, actually. Obviously, the major advantage is that with these handy functions at our disposal, it’s possible to assign one click handler to the HTML table shown in the previous segment, and then implement the highlighting effect only in the cell that was originally clicked. See how useful it is to use event delegation to avoid coding redundant, memory-consuming handlers? I guess you do.  

However, the best way to grasp the actual functionality of event delegation is by looking over the complete source code that corresponds to the example developed earlier.  

Thus, in the following section I’m going to list for you all of the parts that comprise the example, so click on the link below and read the next few lines.  



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