Listen to Element events

PacemEventProxyElement listens to a specific event on a specific target (element) and eases a reactions to that event.

<pacem-event-proxy target="#button1" event="click" on-emit="console.log($event.originalEvent.target.innerText)"></pacem-event-proxy>

PacemEventProxyElement can target native DOM elements (not custom elements only).

In the following example a PacemEventProxyElement listens to some click event on a div element that contains a button.
The click event triggered by the button will eventually bubble up to the div and then intercepted by our component.

PacemEventProxyElement is useful in case of bubbling events that are not directly dispatched by the target element itself.

Capture and Override Behaviors

PacemEventProxyElement can be used to override or intercept and change an element behavior.

The following sample code shows how to capture and postpone a click handler execution.

<pacem-event-proxy target="#target" capture="true" event="click" on-emit="Pacem.avoidHandler($event.originalEvent); doSomethingAsync().then(_ => #target.handle($this.event))"></pacem-event-proxy>

Listen to Window events as well

PacemEventProxyElement may listen to Window events as well.
Set the target attribute to magic string $window for this use-case.

<pacem-event-proxy target="$window" event="focus" on-emit="console.log($event.originalEvent.target + ' focused.')"></pacem-event-proxy>