Event Delegation/Propagation (Bubbling) via jQuery

I was going through the book JavaScript Programmer’s Reference by Alexei White and noticed two diagrams that explain the event delegation and event propagation:

Image may be NSFW.
Clik here to view.

So rather than binding an event handler to each tr or td, you bind only to the table element, and capture the event (via bubbling), detect the element that fired it, and then fire the event handler. This is more efficient than binding to each and every tr or td – instead you rely on the action bubbling up to one element.

Let’s demonstrate this using jQuery:

<html>
<head>
<script language="JavaScript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
 
<script type="text/javascript">
$(document).ready( function() {
 
 // http://api.jquery.com/event.target/
 // http://docs.jquery.com/Events_%28Guide%29
 
 $("#datatable").click( function(event) {    
   // Detect the element that fired off the event
   if ( event.target.nodeName == "TD" )
   {
     alert( "you clicked on a td element" );
   }
 });
});
 
</script>
 
 
</head>
 
<body>
 
<table id="datatable" border="1">
 <tr>    
   <th>Header 1a</th>
   <th>Header 1b</th>
   <th>Header 1c</th>
   <th>Header 1d</th>
   <th>Header 1e</th>
 </tr>
 
 <tr id="row1">
   <td id="aaa">Data 1a</td>
   <td>Data 1b</td>
   <td>Data 1c</td>
   <td>Data 1d</td>
   <td>Data 1e</td>
 </td>
 
 <tr id="row2">
   <td>Data 1a</td>
   <td>Data 1b</td>
   <td>Data 1c</td>
   <td>Data 1d</td>
   <td>Data 1e</td>
 </td>
 
 <tr id="row3">
   <td>Data 1a</td>
   <td>Data 1b</td>
   <td>Data 1c</td>
   <td>Data 1d</td>
   <td>Data 1e</td>
 </td>
 
 <tr id="row4">
   <td>Data 1a</td>
   <td>Data 1b</td>
   <td>Data 1c</td>
   <td>Data 1d</td>
   <td>Data 1e</td>
 </td>
 
</table>
</body>
</html>