Welcome to the Home Page

This is a simple SPA using YpsilonEventHandler's declarative delegation.

About This Example

This example, generated by Grok 3 (xAI), showcases YpsilonEventHandler's handleEvent pattern in a lightweight SPA. As one user said, "The marks are great!" Here's how it works and why it's powerful:

  • Single Listener: A body click listener routes all interactions via data-action (e.g., navigation, toast removal).
  • Dynamic Elements: Adds list items with data-action="handleItemClick" without new listeners.
  • Custom Events: Dispatches app:custom events, shown in toasts.
  • Notifications: Toasts stack with 3-second timeouts and close buttons, using showNotification and removeToast.
  • Navigation: Hash-based for file:// compatibility, with active nav highlighting.
  • Performance: y-btn validation optimizes handling.

Usage Tips: Use data-action for dynamic UIs, extend with input or change events, and call handler.destroy() for cleanup. For scroll events, add a listener on a persistent element (e.g., #main-content) with .scroll-area { height: 300px; overflow-y: scroll; } and delegate to .scroll-area. Try it to see YpsilonEventHandler's ~370-line magic!