on*

Event handlers in Solid typically take the form of onclick or onClick depending on style.

<div onClick={(e) => console.log(e.currentTarget)} />

Conceptually, this example attaches a click event listener (via addEventListener) to the div. However, Solid actually handles common UI events that bubble and are composed (such as click) at the document level, and then synthetically implements delegation (capturing and bubbling). This improves performance for these common events by reducing the number of event handlers.

Note that onClick handles the event click; in general, event names get mapped to lower case. If you need to work with event names containing capital letters, see on: which attaches event handlers directly (also avoiding fancy delegation via document).

Solid also supports passing a two-element array to the event handler to bind a value to the first argument of the event handler. This doesn't use bind or create an additional closure, so it is a highly optimized way of delegating events.

function handler(itemId, e) {
  /*...*/
}

;<ul>
  <For each={state.list}>{(item) => <li onClick={[handler, item.id]} />}</For>
</ul>

Events are never rebound and the bindings are not reactive, as it is expensive to attach and detach listeners. Since event handlers are called like any other function each time an event fires, there is no need for reactivity; shortcut your handler if desired.

// if defined, call it; otherwise don't.
<div onClick={() => props.handleClick?.()} />

Note that onChange and onInput work according to their native behavior (unlike, say, React). onInput will fire immediately after the value has changed; for most <input> fields, onChange will only fire after the field loses focus. The event's currentTarget refers to the element that the event was attached to, while target gives the element that actually triggered the event (e.g. the user clicked on).