Event Delegation versus Event Handling

To test. Click to open and collapse items on the left, bound with event handlers per item. Second, click to open and collapse items on the right for event delegation.

Finally, click the "add more list items" button and observe that event delegation persists and event handlers die. Also, delegation is more efficient.

Article with explanation is here. Oh, and here.

• Testing Link One
  • Handlers Test
  • Handlers Test
  • Handlers Test
  • Handlers Test
• Testing Link Two
  • Handlers Test
  • Handlers Test
  • Handlers Test
  • Handlers Test
• Google
  • Handlers Test
  • Handlers Test
  • Handlers Test
  • Handlers Test
• Yahoo!
  • Handlers Test
  • Handlers Test
  • Handlers Test
  • Handlers Test

• Testing Link One
  • Handlers Test
  • Handlers Test
  • Handlers Test
  • Handlers Test
• Testing Link Two
  • Handlers Test
  • Handlers Test
  • Handlers Test
  • Handlers Test
• Google
  • Handlers Test
  • Handlers Test
  • Handlers Test
  • Handlers Test
• Yahoo!
  • Handlers Test
  • Handlers Test
  • Handlers Test
  • Handlers Test

---

Add more elements:

With apologies to Chris Heilmann. This example is meant to only demonstrate Event Delegation without the usage of the YUI! library.

Basics of the code are otherwise totally ripped off from Chris.