# Events

> Pointer and keyboard listeners, and sending events to the host.

## Sending events to the host

A document never changes your app's data. It asks, with `event`:

```masque
Flex {
  mouse_down: fn () {
    event("tool_selected", tool_name);
  },
  children: [ Text { text: tool_name } ],
}
```

The host registers a handler for each name. See [Typed bindings](/docs/embedding/typed-bindings) for declaring events so a typo is caught at load.

## Pointer listeners

`Flex` and `Grid` accept `mouse_down`, `mouse_up`, `mouse_enter` and `mouse_leave`. Enter and leave fire on the transition, for every widget on the path from the root to the deepest hit.

## Key chords

`keydown` takes a map from chord to handler. Modifiers join with `_`:

```masque
Flex {
  keydown: {
    ctrl_k: fn () { event("palette"); },
    escape: fn () { event("close"); },
  },
  children: [],
}
```

A chord with Ctrl, Alt or Meta goes to the focused listeners first, innermost first. A bare key goes to the tree first.

## Controls

```masque
Slider {
  value: volume, min: 0, max: 100, step: 5,
  on_change: fn (v: float) { event("set_volume", v); },
  on_commit: fn (v: float) { event("save_volume", v); },
  style: { width: "grow", height: 16 },
}
```

Controls are controlled: the document supplies `value` on every render, and the widget reports what the pointer asked for.

`TextInput` reports `on_change` on every edit, `on_submit` on Enter, and `on_blur` when focus leaves by any route.

TODO: drag and drop, context menus, scroll, pointer capture.