mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-04 04:23:02 +00:00
Tomas Dvorak
17 lines
2.4 KiB
JSON
17 lines
2.4 KiB
JSON
{
|
|
"id": "1e47937d47b3b7e18e1ec841",
|
|
"source": "solid:signals",
|
|
"type": "github-document",
|
|
"title": "on",
|
|
"content": "---\ntitle: 'on:*'\norder: 4\nuse_cases: \u003e-\n custom events, non-bubbling events, capture phase handling, passive listeners,\n special event options\ntags:\n - events\n - listeners\n - dom\n - capture\n - passive\n - handlers\nversion: '1.0'\ndescription: \u003e-\n Attach non-delegated event handlers with on:* in SolidJS. Control capture,\n passive, and once options for advanced event handling requirements.\n---\n\nFor events with capital letters, listener options, or if you need to attach event handlers directly to a DOM element instead of optimized delegating via the document, use `on:*` in place of `on*`.\n\n```tsx\n\u003cdiv on:DOMContentLoaded={(e) =\u003e console.log(\"Welcome!\")} /\u003e\n```\n\nThis directly attaches an event handler (via [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)) to the `div`.\n\n:::note\n\u003cspan\u003eNew in v1.9.0\u003c/span\u003e\n:::\n\nAn aditional special syntax that allows full control of [`capture`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#capture), [`passive`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#passive), [`once`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#once) and [`signal`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#signal) is an intersection or combination of `EventListenerObject` \u0026 `AddEventListenerOptions`, as follows:\n\n```tsx\nconst handler = {\n\thandleEvent(e) {\n\t\tconsole.log(e)\n\t},\n\tonce:true,\n\tpassive:false,\n\tcapture:true\n}\n\n\u003cdiv on:wheel={handler} /\u003e\n\n// or inline\n\n\u003cdiv on:click={{passive:true, handleEvent(e) { console.log(\"Weeeee!\")}}} /\u003e\n```\n\nThis new syntax replaces the now deprecated `oncapture:` and it's future proof for any posible new event listener options.",
|
|
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/jsx-attributes/on.mdx",
|
|
"metadata": {
|
|
"path": "src/routes/reference/jsx-attributes/on.mdx",
|
|
"repo": "solidjs/solid-docs",
|
|
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
|
"size": 1783,
|
|
"source_type": "github"
|
|
},
|
|
"hash": "75a0c92668aa2392b203badfe018cc8168d80ad180518d6300680c60343b984c",
|
|
"timestamp": "2026-02-23T11:43:00.189441594+01:00"
|
|
} |