DOM Event Filter Playground

Interactive demo of DomEventFilter — a single instance routes keyboard, pointer, and form events to handlers based on DOM context hierarchy.

GitHub npm Docs
Masks use event.code for keyboard shortcuts, making them layout-independent. Context is resolved via data-context attributes in the DOM tree.
Game Context-scoped keyboard controls inactive
Space and Ctrl only trigger game.jump / game.shoot events when focus is inside the data-context="game" subtree. Cheat sequences (IDDQD, IDKFA) work globally since they have no context constraint.
Score: 0 Lives: 3 Ammo: 5 Speed: 3.0
Click or tap the arena to start. Space/Up to jump, Ctrl/X to shoot — or swipe up / tap on mobile.
Sequences: type IDDQD for god mode, IDKFA for unlimited ammo (works from any context).
Editor Nested contexts & event types inactive
Combines keyboard (keydown), mouse (click), and form (input, change, focusin/out) events within nested contexts: editor > toolbar and editor > canvas. Ctrl+S in the editor fires editor.save, not the global save.
Type here to see input/focus events scoped to the editor.canvas context. Toolbar clicks dispatch editor.toolbar.* events. Press Tab twice for a sequence demo.
Ctrl+S dispatches editor.save, Tab+Tab fires editor.autocomplete sequence, toolbar clicks emit editor.toolbar.* events.
Form Deep context hierarchy & form events inactive
Four nested contexts (form > profile, security, meta, actions) route change, focusin, and click events to field-level handlers. Ctrl+Enter and Escape are scoped to the form context.
Emits form.meta.roleChange on change.
Each field emits form.{subcontext}.{action} events on change/focus. Ctrl+Enter submits, Escape resets.
dom-event-filter © Petro Borshchahivskyi, 2021