Basics · Events

Handling clicks

Elements fire DOM-style events. Write on<type>={handler} — onclick, oninput, onchange — and the handler runs when that event reaches the element. The value has to be the {expr} form (a Go expression, usually a function name); a string like onclick="clearAll" is not wired.

A handler can take the event or ignore it. Declare it with a *sumi.DOMEvent parameter to read the payload (evt.Target, evt.Data, evt.StopPropagation()), or with no parameters when you only care that the click happened. The button below has a Clear all label but no handler, so clicking it does nothing.

A left mouse press hit-tests to the deepest element under the cursor and dispatches a click. Enter also synthesises a click on the focused element, so the button works from the keyboard once it is wired — Tab to it, press Enter.

Your turn

Add a clearAll function that empties the list, and wire it to the button with onclick:

func clearAll() {
    todos.Set([]string{})
}

<button onclick={clearAll}>Clear all</button>

Press Run, click the button (or Tab to it and press Enter), and the list empties.