Type alias InlineEventName<QualifiedEventNames>

when explicitly declaring a prop to be of an event listener, use the on: prefix to specify.
examples: on:change, on:click, and on:resize
common values for the QualifiedEventNames type parameter:

• for all html events: InlineEventName
• for all svg events: InlineEventName
• for any allowing arbitrary event names: InlineEventName

note that using a union of string literal event names instead of just using any arbitrary string attribute, will lead to slowdowns in you IDE.
also, your event should implement either EventFn signature, or the AdvancedEventFn tuple.

Example

const MyComponent = () => {
    return <div style="color: blue;" class="some-thing" attr:id="another-thing">
        Hello world!
    </div>
}
const my_soon_to_be_green_component = <MyComponent on:click={(event: MouseEvent) => {
    const the_element = event.currentTarget
    the_element.style.color = "green"
    the_element.id = "a-different-thing"
}} />
// this will turn into the following when clicked:
// <div style="color: green;" id="a-different-thing" class="some-thing">Hello World!</div>
Copy