Comprehensive SPA Demo (Single Page Application)

🖱️ Click Events with Data-Action Routing

🤯 Mind-Blowing Fact:

ZERO of these buttons have event listeners attached to them! We have ONE click listener on the <body> element that controls ALL buttons on this page. New buttons added dynamically? Still work instantly, because for the listener nothing has changed, it's still the same element it's listening to - no re-assignment needed!

✨ Dynamic Button Playground:

Click "Create Dynamic Button" to add new buttons. They work instantly without any event listener setup!

Removable Element: Click "Remove Element" to remove this box.

Removable item #1

Removable item #2

🚀 Custom Events

YpsilonEventHandler includes a powerful dispatch() method for custom events.

Custom events will appear here...

📝 Input Events with Debouncing

Input events will appear here...

🔄 Change Events

Change events will appear here...

⌨️ Keyboard Events

Press any key while focused on this page to see keydown events in the console.

Press a key to see keydown events...

📏 Window Events

Resize the window or scroll to see throttled events in the console.

Window events will appear here...

⚡ State Management (Ypsiwork-inspired)

Reactive state management with automatic UI updates using data-state attributes.

Click count: 0

Last key pressed: none

Current input: empty

Window size: 0x0

State updates automatically sync across all data-state elements!