Home arrow JavaScript arrow Page 2 - Using HTML Lists with Event Delegation in JavaScript

Implementing event delegation with an HTML table - JavaScript

Do you enjoy the responsiveness that using event handlers in JavaScript adds to your web site, but feel concerned about the way they can slow down your applications? Fear not; this four-part article series covers event delegation, a technique that can solve this problem in certain situations. This article is the third part of the series.

TABLE OF CONTENTS:
  1. Using HTML Lists with Event Delegation in JavaScript
  2. Implementing event delegation with an HTML table
  3. Working with unordered HTML lists for event delegation
  4. Adding a simple behavior to the HTML list
By: Alejandro Gervasio
Rating: starstarstarstarstar / 4
April 29, 2009

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

Before I proceed to show you how event delegation can be utilized in conjunction with HTML lists, I will list the full source code of the example developed in the previous article. It showed a basic implementation of this approach for creating highlighting effects on all of the cells of an HTML table.

The hands-on example was built as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Example on JavaScript event delegation (with mouseover event)</title>

<script language="javascript">

// get target element (excerpted)

function getEventTarget(e){

 var e=e || window.event;

return e.target || e.srcElement;

}

// check if target is a table cell (excerpted)

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

}

}

}

</script>

<style type="text/css">

table{

width: 500px;

border: 1px solid #000;

}

td{

font: normal 10pt Arial, Helvetica, sans-serif;

color: #000;

background: #9fc;

border: 1px solid #000;

}

.highlighted{

background: #0c9;

}

</style>

</head>

<body>

<h1>Event delegation in JavaScript (with mouseover event)</h1>

<table id="mytable">

<tr>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

</tr>

<tr>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

</tr>

<tr>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

</tr>

<tr>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

</tr>

<tr>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

</tr>

<tr>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

</tr>

<tr>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

</tr>

<tr>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

</tr>

<tr>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

</tr>

<tr>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

<td>This is the content of the cell</td>

</tr>

</table>

</body>

</html>

In case the previous code sample doesn’t ring any bells for you, let me quickly explain how it works. In layman’s terms, the event delegation approach is implemented via the “getEventTarget()” and “highlightCell()” functions, which apply the highlighting effect on the table cells by assigning only one “mouseover” handler to the table. Here, it’s clear to see how useful a delegated event can be in  reducing the number of event handlers required by a JavaScript application.

All in all, at this point you should be familiar with the basics for using event delegation with HTML tables. So it’s time to see how this same handy technique can be utilized when working with unordered HTML lists.

This subject will be discussed in depth in the course of the section to come. So, to learn more, click on the link that appears below and keep reading.



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