From 5d1b64c3f1255ee3ef75ddef9097f41143cd92b3 Mon Sep 17 00:00:00 2001 From: Sebastian Aigner Date: Wed, 5 May 2021 17:25:13 +0200 Subject: [PATCH] Web: Add tutorial section on "other event handlers" --- tutorials/Web/Events_Handling/README.md | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/tutorials/Web/Events_Handling/README.md b/tutorials/Web/Events_Handling/README.md index 1583c318ee..dcfe07acda 100644 --- a/tutorials/Web/Events_Handling/README.md +++ b/tutorials/Web/Events_Handling/README.md @@ -35,8 +35,22 @@ TextArea( ) ``` + +#### Other event handlers + +For events that don't have their own configuration functions in the `attrs` block, you can use `addEventListener` with the `name` of the event, `options`, and an pass an `eventListener` which receives a `WrappedEvent`. In this example, we're defining the behavior of a `Form` element when it triggers the `submit` event: + +``` +Form(attrs = { + this.addEventListener("submit") { + console.log("Hello, Submit!") + it.nativeEvent.preventDefault() + } +}) +``` + Your event handlers receive wrapped events that inherit from `GenericWrappedEvent`, which also provides access to the underlying `nativeEvent` – the actual event created by JS runtime - https://developer.mozilla.org/en-US/docs/Web/API/Event -There are more event listeners supported out of a box. We plan to add the documentation for them later on. In the meantime, you can find all supported event listeners in the [source code](https://github.com/JetBrains/androidx/blob/compose-web-main/compose/web/src/jsMain/kotlin/androidx/compose/web/attributes/EventsListenerBuilder.kt). \ No newline at end of file +There are more event listeners supported out of a box. We plan to add the documentation for them later on. In the meantime, you can find all supported event listeners in the [source code](https://github.com/JetBrains/androidx/blob/compose-web-main/compose/web/src/jsMain/kotlin/androidx/compose/web/attributes/EventsListenerBuilder.kt).