the type of the Custom Element
This API is dedicated for developer of Builders.
Force the listener execution on the capture phase.
Decorate the listener method which is invoked according to the clauses.
When the clause is not specified by OnBuilder.get, then the event name to listen to is discovered from the decorated method name.
The pattern is <prefix><event-name-in-kebab-case>
, where <prefix>
is by default on
.
the prefix used to discover the event name from the method name
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a CSS selector, whether those descendants exist now or are added in the future. c.f. the jQuery doc
the CSS selector
Override the default target, for instance to listen to global events, i.e. window.document
or window.document
.
Register the listener.
the type of the Event
the type of the target
the callback
Force the usage of preventDefault()
once the event is received.
By default, the selection of the target element is done in the light DOM. This option forces the selection into the shadow DOM.
Apply .prevent()
and .stop()
at the same time.
Force the usage of stopPropagation()
once the event is received.
Provide a fresh builder.
the type of the Custom Element
the clauses separated by ,
, it's optional only when the decorator API (i.e. OnBuilder.decorate) is used
Generated using TypeDoc
The builder handles the addition and removal of DOM event listeners.
The DOM event listeners are simple callback functions, c.f. OnListener. They can be registered with OnBuilder.invoke. The registered event listeners are added on
connectedCallback
and removed ondisconnectedCallback
.The DOM event listeners are invoked according to provided clauses. A clause is an event name to which an optional CSS selector can be associate. The pattern is
EVENT_NAME <CSS_SELECTOR>
. For instance, the clauseclick
adds an event listener to the node of the Custom Element and, listen toclick
. About the optional CSS selector, it is way to add the event listener to a child node of the Custom Element. For instance, the clauseclick div button
adds an event listener to the node which matches the CSS selectordiv button
.Alternatively, {@link OnBuilder.target} can also be used to specify the target. Moreover, it can also be used to listen to global events. For instance, the
hashchange
events dispatched onwindow
.The event listeners can be configured to be invoked on the capture phase with OnBuilder.capture.
Once the event is received, its method
preventDefault()
can be dynamically invoked with OnBuilder.prevent. The methodstopPropagation()
can also be dynamically invoked with OnBuilder.stop. Both methods can be dynamically invoked with OnBuilder.skip.The event delegation (c.f. jQuery) can be configured with OnBuilder.delegate.
By default, the CSS selectors are applied to the Light DOM. However, they can be applied into the Shadow DOM with OnBuilder.shadow.
Finally, the builder can be registered using the method ElementBuilder.builder of the main builder (i.e. ElementBuilder). However, it can also be registered with the decorative style using the decorator OnBuilder.decorate.