{
  "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"
}