Type alias EventProps<ELEM>

the props used for explicitly declaring event handler functions on the output of any HyperRender.h | Element Renderer.
if you use a 2-tuple, you can specify the event handler function (event_fn) in the first entry, and its configuration option (of type AddEventListenerOptions) in the second entry.

Example

// example for a simple click event:
let triggered = false
const my_button = <button {...{
    [EVENTS]: {
        click(event) {
            const element = event.currentTarget as HTMLButtonElement
            if (triggered) { element.attributeStyleMap.set("background-color", "red") }
            else { element.attributeStyleMap.set("background-color", "blue") }
            triggered = !triggered
        }
    } as EventProps
}}>
GET TRIGGERED
</button>
Copy

Example

// example for click-once event using 2-tuple description:
const my_div = <div {...{
    [EVENTS]: {
        click: [(event) => {
            console.log("user clicked at (x,y)-position:", event.clientX, event.clientY)
        }, { once: true, passive: true }]
    } as EventProps
}}>
PLZZ CLICC ONN BIGG DIVV ONCEE ONLYY
</div>
Copy