on*
Edit this pageEvent handlers in Solid typically take the form of onclick
or 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.
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.
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.
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).