JSX attributes

on:*

For 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*.

<div on:DOMContentLoaded={(e) => console.log("Welcome!")} />

This directly attaches an event handler (via addEventListener) to the div.

An additional syntax allows full control of capture, passive, once and signal via an intersection or combination of EventListenerObject & AddEventListenerOptions, as follows:

const handler = {
  handleEvent(e) {
    console.log(e)
  },
  once:true,
  passive:false,
  capture:true
}

<div on:wheel={handler} />

// or inline

<div on:click={{passive:true, handleEvent(e) { console.log("Weeeee!")}}} />

Removed in Solid 2.0

The oncapture: event syntax has been removed in Solid 2.0. Use the on:* syntax with capture: true in the handler options object (as shown above) instead.

This syntax replaces the removed oncapture: prefix and is future-proof for any new event listener options.

Report an issue with this page