Eventos

HTML permite configurar ouvintes de eventos sequenciais usando atributos on*. É basicamente assim que você define ouvintes de eventos em tags em Markup.

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

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

A grande diferença com Markup é que esses atributos não são renderizados e nos bastidores Markup está usando o addEventListener para definir ouvintes de eventos em suas tags.

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

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

Isso permite que seu HTML tenha ouvintes de eventos e seja seguro, não permitindo atributos de ouvintes de eventos in-seguros e ainda aproveitando todas as vantagens de usar a API addEventListener.

Opções de evento

Como o Markup usa o addEventListener nos bastidores, ele oferece uma sintaxe especial que permite definir opções que não são possíveis com o HTML nativo.

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

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

Ao fornecer uma tupla (matriz com dois valores), você pode especificar o manipulador e suas opções a serem usadas ao definir um ouvinte de evento.

Essas opções são apenas opções addEventListener que permitem especificar como o evento deve ser tratado, incluindo a definição de sinais.

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
)