Event Delegation Demo

In this demonstration, I have used event delegation to add event listeners to each of the 100 boxes below. I also ran the same test using prototype's $$() function to add an event listener to each box individually. All tests were run in Firefox 2.0.0.14 on Windows XP on an Core 2 Duo 2.2ghz w/ 2gb of memory. As you can see, event delegation can significantly reduce the number of function calls that are made on your page load. Additionally, though not captured here, since only one copy of the event handler is stored, there are significant memory use benefits as well. Here are the results:

Results

Using event delegation: 993 function calls, 15.623ms execution time

Using $$(): 3324 function calls, 31.247ms execution time

To test

Each click on a square will change the background color of that square to Blue. Notice that none of the individual squares is listening for an event; only the container listens for the event.