// get target element
var e=e || window.event;
return e.target || e.srcElement;
// check if target is a table cell
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.