Light logoJaspr

events()

You can attach event handlers to every html element like this:

dart
Using manual event handlers
return div(events: {
  'click': (event) {
    print('Clicked');
  },
}, [.text('Click Me')]);

By default, you provide a Map<String, EventCallback> with the event name and a callback, taking in the Event as its only parameter.

The events() utility method provides bindings to some common event types in a more type-safe way. The same element from above using the events() method looks like this:

dart
Using events utility
return div(events: events(onClick: () {
  print('Clicked');
}), [.text('Click Me')]);

As shown, the result of the events() call can be passed directly to the events: parameter of a html component.

Event Bindings

It has bindings to the following events:

onClickvoid Function()optional

The onClick handler binds to the click event and receives no parameters.

onInputvoid Function(T value)optional

The onInput handler binds to the input event and receives a single parameter value.

The type of the value parameter must be a generic type according to the target element:

  • bool? for checkbox or radio input elements
    • num? for number input elements
    • DateTime for date input elements
    • List<File>? for file input elements
    • List<String> for select elements
    • String for text input and textarea elements
    • Null for all other elements
dart
return input(type: InputType.checkbox, events: events(onInput: (bool? value) {
  print('Checked: $value');
}), []);
onChangevoid Function(T value)optional

The onChange handler binds to the change event and receives a single parameter value.

The type of the value parameter must be a generic type according to the target element:

  • bool? for checkbox or radio input elements
    • num? for number input elements
    • DateTime for date input elements
    • List<File>? for file input elements
    • List<String> for select elements
    • String for text input and textarea elements
    • Null for all other elements
dart
return textarea(events: events(onChange: (String value) {
  print('Content: $value');
}), []);

Component Shortcuts

Some interactive html components have shortcut parameters for certain common event types. These work the same as above but are direct parameters on the html component accepting the respective event handler:

  • button(onClick: () {})
  • input(onInput: (value) {}, onChange: (value) {})
  • select(onInput: (value) {}, onChange: (value) {})
  • textarea(onInput: (value) {}, onChange: (value) {})
@css / css()
GlobalNodeKey

On this page