Demonstrating the power of event delegation with dynamic content
⚡ ONLY 5 9 EVENT LISTENERS for this ENTIRE SPA! ⚡
ONE handler on body handles ALL events - no matter when elements are created!
Create new elements dynamically - they work instantly without new listeners!
Add, complete, and delete todos - all handled by the same body listener!
Switch between tabs - all handled by event delegation!
This is the content of tab 1. Click buttons below to test event delegation:
This is the content of tab 2. These buttons were here from the start:
This is the content of tab 3. Event delegation works everywhere:
All form events handled by the same body listener with delegation:
Scroll in the area below to test passive scroll events:
This scroll area demonstrates passive event listeners.
When you scroll here, the event will be handled with passive:true automatically.
This improves performance by telling the browser that preventDefault() won't be called.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.
Keep scrolling to see more content...
The scroll events are being logged to the output area above.
Notice how smooth the scrolling is with passive listeners!
This is the power of automatic passive listener detection.
YpsilonEventHandler handles this optimization automatically.
No manual configuration needed!
You're near the bottom now.
Final paragraph of scrollable content.
These are the event listeners assigned to this entire SPA!
No additional listeners will be created - all dynamic content uses these same 5 9 listeners via event delegation.
Just click or focus on any button that generates something visual, like "➕ Create Card" and keep enter pressed! While you generate, scroll using the scrollbar. It allows us to scroll fast. Try it for yourself, it took me seconds.
| Clicks: 2,887 | Dynamic Elements: 2,627 | Events Handled: 3,664 | Scroll Position: 143k | Event Listeners: 6 |
All achieved with ~500 lines of vanilla JavaScript + native handleEvent interface. One has to see it to believe it.
Watch how ONE body listener handles ALL events (max: 50):