YpsilonEventHandler - Comprehensive Template

🖱️ 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 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!

Test Custom Event Scroll to Top Remove Element Remove All .removable Create Dynamic Button

✨ Dynamic Button Playground:

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

🚀 Custom Events

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

📝 Input Events with Debouncing

🔄 Change Events

Select an option Option 1 Option 2 Option 3

⌨️ Keyboard Events

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

📏 Window Events

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

⚡ State Management (Ypsiwork-inspired)

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

Increment Click Count Reset Count

Click count: 0

Last key pressed: none

Current input: empty

Window size: 0x0

State updates automatically sync across all data-state elements!

Scroll content for testing scroll events