Events

HTML allows you set inline event listeners using on* attributes. This is pretty much how you set event listeners on tags in Markup.

                const handleClick = (event) => {
    console.log(event)
}

html`<button onclick="${handleClick}">click me</button>`
            

The big difference with Markup is that these attributes are not rendered and behind the scenes Markup is using the addEventListener to set event listeners on your tags.

                html`<button onclick="${handleClick}">click me</button>`.render(document.body)

// renders: <button>click me</button>
            

This allows your HTML to have event listeners and be safe by not allowing unsafe inline event listeners attributes while still enjoying all the advantages of using addEventListener API.

Event options

Because Markup is using addEventListener behind the scenes, it offers a special syntax that allows you to set options which is not possible with native HTML.

                const handleClick = (event) => {
    console.log(event)
}

html`<button onclick="${[handleClick, { once: true }]}">
    click me
</button>`.render(document.body)
            

By providing a tuple (array with two values), you can specify the handler and its options to be used when setting an event listener.

These options are just addEventListener options that allows you to specify how the event should be handled including defining signals.

                const controller = new AbortController()
const signal = controller.signal

const handleClick = (event) => {
    controller.abort()
    console.log('clicked')
}

html`<button onclick="${[handleClick, { signal }]}">click me</button>`.render(
    document.body
)