Handling Events

In web applications there are a lot of interactive parts, and all of these parts are handling some input form the users. Inputs can come from a variety of sources such as keyboard, and mouse. An instance of these inputs is called an event.

You can handle events coming from the DOM using event attributes. An event attribute is always starts with on followed by the name of the event (capitalized), for example: onClick or onInput.

In this example we are listening on a click event:

component Main {
fun render : Html {
<button onClick={(event : Html.Event) : String { Debug.log("Hello") } }>
"Click Me!"
</button>
}
}

Every time the users clicks on this button the "Hello" string is printed in the console.

Event attributes should match a specific type signature Function(Html.Event, a) which means that only functions which take an Html.Event and return something can be passed to these attributes. Alternatively you can just pass a Function(a) if you don't care about the event.

Html.Event

An Html.Event is a record with the following fields:

Name

Type

bubbles

Bool

cancelable

Bool

currentTarget

Dom.Element

defaultPrevented

Bool

eventPhase

Number

isTrusted

Bool

target

Dom.Element

timeStamp

Number

type

String

data

String

altKey

Bool

charCode

Number

ctrlKey

Bool

key

String

keyCode

Number

locale

String

location

Number

metaKey

Bool

repeat

Bool

shiftKey

Bool

which

Number

button

Number

buttons

Number

clientX

Number

clientY

Number

pageX

Number

pageY

Number

screenX

Number

screenY

Number

detail

Number

deltaMode

Number

deltaX

Number

deltaY

Number

deltaZ

Number

animationFrame

String

pseudoElement

String

propertyName

String

elapsedTime

Number