<pacem-event-proxy> lets markup react to any DOM event of any element, native ones and window included: point it at a target, name the event, handle emit. The glue for everything that has no on-… attribute of its own.

<pacem-event-proxy target="#article" event="copy" on-emit="#notice.model = true"></pacem-event-proxy>
<pacem-event-proxy target="$window" event="resize" on-emit="#width.model = $event.originalEvent.target.innerWidth"></pacem-event-proxy>

Usage

Point and name. target is an element (#id, or a binding) or $window; event is any DOM event name. Each occurrence fires emit, carrying the caught event as $event.originalEvent.

<pacem-event-proxy target="#form" event="submit" on-emit="$event.originalEvent.preventDefault()"></pacem-event-proxy>

Listen high, catch many. Events bubble: listen on a container, and originalEvent.target tells which child it came from. One proxy can serve a whole list (event delegation).

A proxy is a listener, not a re-dispatcher: emit doesn't bubble, and originalEvent is the real event (call its preventDefault() if you need to).

Catch it first. capture="true" listens in the capture phase, before the event reaches its target.

Change target or event at any time: the proxy detaches from the old ones and listens to the new.

Examples

A star rating, one listener

Five plain buttons, a single proxy on their container: originalEvent.target says which star got clicked.

A viewport badge

$window + resize: the badge says which breakpoint you're in. Resize the window (or rotate your phone).