mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-04 04:23:02 +00:00
Tomas Dvorak
17 lines
3.4 KiB
JSON
17 lines
3.4 KiB
JSON
{
|
|
"id": "9aaed4dd1850eda7977a5f67",
|
|
"source": "solid:solid-router",
|
|
"type": "github-document",
|
|
"title": "on",
|
|
"content": "---\ntitle: on*\norder: 3\nuse_cases: \u003e-\n user interactions, click handlers, form events, keyboard input, mouse events,\n touch handling\ntags:\n - events\n - handlers\n - interactions\n - click\n - input\n - delegation\nversion: '1.0'\ndescription: \u003e-\n Handle user events efficiently in SolidJS with onClick and other event\n handlers. Optimized delegation system for improved performance at scale.\n---\n\nEvent handlers in Solid typically take the form of `onclick` or `onClick` depending on style.\n\n```tsx\n\u003cdiv onClick={(e) =\u003e console.log(e.currentTarget)} /\u003e\n```\n\nConceptually, this example attaches a `click` event listener (via [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/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.\n\nNote 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, or use listener options such once, passive, capture see [`on:`](/reference/jsx-attributes/on) which attaches event handlers directly (also avoiding fancy delegation via document).\n\nSolid 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.\n\n```tsx\nfunction handler(itemId, e) {\n\t/*...*/\n}\n\n\u003cul\u003e\n\t\u003cFor each={state.list}\u003e{(item) =\u003e \u003cli onClick={[handler, item.id]} /\u003e}\u003c/For\u003e\n\u003c/ul\u003e;\n```\n\nEvents 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.\n\n```tsx\n// if defined, call it; otherwise don't.\n\u003cdiv onClick={() =\u003e props.handleClick?.()} /\u003e\n```\n\nNote that `onChange` and `onInput` work according to their native behavior (unlike, say, React). [`onInput`](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event) will fire immediately after the value has changed; for most `\u003cinput\u003e` fields, [`onChange`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) 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).",
|
|
"url": "file:///tmp/devour-github-216944658/src/routes/reference/jsx-attributes/on_.mdx",
|
|
"metadata": {
|
|
"path": "/tmp/devour-github-216944658/src/routes/reference/jsx-attributes/on_.mdx",
|
|
"repo": "solidjs/solid-docs",
|
|
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
|
"size": 2680,
|
|
"source_type": "github"
|
|
},
|
|
"hash": "5bb111fda07b360305f194eaccd5087c93ad5c7a7f4d4248022ea02e78517692",
|
|
"timestamp": "2026-02-23T11:39:22.439697457+01:00"
|
|
} |