Events
KVision allows you to listen to all the standard DOM events and also many custom events from many different components. You bind your action to an event with the onEvent
extension function.
Some components define a shortcut method onClick
for the click event, so you can write:
If you are using coroutines you can also use onClickLaunch
extension function:
Event function parameter is not required if not used.
You can bind many different event handlers with one call to the onEvent
function.
The onEvent
extension function returns Int
value, which can be used to remove the event listener from the component.
Sending events to components
There are several ways to send events to components.
One is to call functions on HTMLElement, i.e.
If there isn't a function representing your event, you can instead use dispatchEvent(), i.e.
KVision custom events
SplitPanel
, Window
, Tabulator
, TabPanel
and some OnsenUI components dispatch different custom events. You can use the name of the event just like with standard events.
Bootstrap custom events
For events defined by Bootstrap components, which cannot be used like above because of their names, you need to use event()
extension function.
jQuery events
For events defined by jQuery based components (Upload
) use jqueryEvent()
extension function from the kvision-jquery
module.
Self reference inside an event handler
In the code of an event handler you can get the reference to the component instance with a special self
variable.
Event Flows
The kvision-state-flow
module, which depends on Kotlin coroutines library, allows you to easily create Flow streams of events. Using flows, you can process events from KVision components with the power of Kotlin flow API (e.g. handling back-pressure or combining multiple flows). The module gives you universal eventFlow
extension function and the dedicated clickFlow
, inputFlow
and changeFlow
functions for the corresponding event types.
Last updated