Component events
Components send their own events. REALM adds one event of its own for form-associated components.
Sending
| Way | Defaults |
|---|---|
dispatch(type, detail, options) |
bubbles: true, composed: true, cancelable: true |
host.dispatchEvent(new CustomEvent(type, init)) |
Whatever init says |
Composed events cross shadow boundaries, so a page can listen on an ancestor.
Handling
| Where | How |
|---|---|
| A parent component's markup | on<type>="code" on the child, for any event name. See on… handlers |
| A plain page | on<type>="code" attribute or element.on<type> = fn property, for event names found in the component's script |
| Anywhere | addEventListener(type, …) |
On plain pages, REALM finds event names written as dispatch("name", new CustomEvent("name" or new Event("name" in the component script. Names that are native handlers (onchange, oninput, onclose, …) already work and are not redefined.
change from delegated controls
A form-associated component with ref="control" re-dispatches its control's change event from the host:
| Event | Bubbles | Composed | When |
|---|---|---|---|
change |
yes | no | The inner control fired change, after the value / checked prop was updated |
The inner control's own input events are composed and reach the host's listeners as they are.
REALM UI events
Each component page under Components lists that component's events.