Fireing custom events #
Web Components use events to communicate state changes up the DOM tree to parent elements.
Furo also provides a notation for events which allows you to specify events in a declarative manner. This is very useful when you want to trigger a event with a more specific name then the originating event has.
*On the first view, it does not make sense to rename events. Take a look at the example below to get a better understanding. controller-component
my-player
Imagine a simple controller component with some buttons.
Each of them will dispatch a simple click.
Using at-click on the controller inside of the my-player can not distinguish which button was pressed.
Non bubbling events #
Non bubbling events will, as the name says, not bubble and stop at the next dom parent.
To fire a non-bubbling-event use ^event-name.
Bubbling events #
To fire a bubbling-event use ^^event-name. Bubbling is useful if you want or have to use the event in a parent component. It is a good practice to document the bubbling events from the child components.
the general-error event will bubble.
Non bubbling host events #
With -^ you can dispatch an event, which is available on the host only, but does not bubble. This is useful when you want to mimic the blur event (which does not bubble) on the outside of your component.
Sending host data with events #
Sometimes you want to send some values with your event, when the default event.detail is not useful. You can send any host property with your event by giving the property name in brackets like ^^some-event(propertyName) .
bubbling event with custom data
|
|
The click event sends usually a number for the amount of clicks with a certain time distance. So it will send 1 for a click, 2 for a doubleClick, 3 for a trippleClick,…
Sending multiple events from a single source #
You can also send multiple events from a single source.
|
|
When the button is tapped, some-event and other-event will be fired and the wire –checkTapped will be triggered.
Stop propagation #
To stop the event propagation to parent elements, add a :STOP to the event wires at-error="--errorOccured, :STOP".
The wires in this event-chain will be triggered. But the propagation will be stopped.
Prevent Default #
Prevent default can be achieved by using :PREVENTDEFAULT.