Event handlers in Solid typically take the form of
onClick depending on style.
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.
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.
1 2 3 4 5 6 7
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.
onInput work according to their native behavior (unlike, say, React).
onInput will fire immediately after the value has changed; for most
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).