---
title: events()
---

---

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

```dart title="Using manual event handlers"
yield 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 title="Using events utility"
yield 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.

<Info>
When using the `events()` utility you don't have access to the original `Event` property. When this is needed you need
to fall back to using a normal `Map` of event names to callbacks.
</Info>

## Event Bindings

It has bindings to the following events:

### onClick

The `onClick` handler binds to the `click` event and is a callback with no parameters.

### onInput

The `onInput` handler binds to the `input` event and is a callback with 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
yield input(type: InputType.checkbox, events: events(onInput: (bool? value) {
  print('Checked: $value');
}, []);
```

### onChange

The `onChange` handler binds to the `change` event and is a callback with 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
yield 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) {})`
