# Input, actions, and focus

> Event handlers, actions, key contexts and the focus path.

## Events

Handlers are registered on elements:

```rust
div().on_click(cx.listener(|this: &mut Self, event, window, cx| {
    this.clicked += 1;
    cx.notify();
}))
```

`cx.listener` binds a handler to the current entity, giving it `&mut Self`
and a `Context<Self>` when it fires.

## Actions

Actions are named commands that can be bound to keys or dispatched from code.

```rust
actions!(card, [Expand, Collapse]);

div()
    .key_context("Card")
    .on_action(cx.listener(|this, _: &Expand, _window, cx| {
        this.expanded = true;
        cx.notify();
    }))
```

Dispatch from code with `window.dispatch_action(Expand.boxed_clone(), cx)` or
`focus_handle.dispatch_action(&Expand, window, cx)`. Actions with data use the
`Action` derive macro. Doc comments on actions are user-visible text.

## Focus and dispatch

Key events travel along the focus path, from the focused element up to the
window root, and each element's `key_context` decides which bindings apply.
Zed's [Key dispatch](/upstream/key-dispatch) chapter has the full model.