Handling Events

In web applications there are a lot of interactive parts, and all of these parts are handling some input from 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 ( camelCase ), 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: