Event Handling in SolidJS

From the SolidJS cheat sheet · Components & JSX · verified Jul 2026

Handle DOM events with on-prefixed attributes and native event delegation.

tsx

// Quick Reference
<button onClick={() => console.log("clicked")}>Click</button>
<input onInput={(e) => setValue(e.currentTarget.value)} />

💡 SolidJS uses event delegation for common events — they're handled at the document level

⚡ Use on: prefix (e.g., on:scroll) for events that should NOT be delegated

📌 Pass a tuple [handler, data] to bind data to an event without creating a closure

🟢 Events use native DOM types — e.currentTarget is properly typed in TypeScript

eventsdelegationhandlers

More SolidJS tasks