Événements

HTML vous permet de définir des écouteurs d'événements en ligne à l'aide des attributs on*. C'est à peu près ainsi que vous définissez les écouteurs d'événements sur les balises dans Markup.

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

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

La grande différence avec Markup est que ces attributs ne sont pas rendus et qu'en coulisses, Markup utilise addEventListener pour définir des écouteurs d'événements sur vos balises.

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

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

Cela permet à votre HTML d'avoir des écouteurs d'événements et d'être sûr en n'autorisant pas les attributs d'écouteurs d'événements en ligne dangereux tout en bénéficiant de tous les avantages de l'utilisation de l'API addEventListener.

Options d'événement

Étant donné que Markup utilise addEventListener en arrière-plan, il offre une syntaxe spéciale qui vous permet de définir des options qui ne sont pas possibles avec HTML natif.

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

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

En fournissant un tuple (tableau avec deux valeurs), vous pouvez spécifier le gestionnaire et ses options à utiliser lors de la définition d'un écouteur d'événement.

Ces options ne sont que des options addEventListener qui vous permettent de spécifier comment l'événement doit être géré, y compris la définition des signaux.

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
)