Eventos

HTML le permite configurar detectores de eventos en línea utilizando los atributos on*. Así es más o menos como se configuran los detectores de eventos en las etiquetas en Markup.

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

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

La gran diferencia con Markup es que estos atributos no se representan y detrás de escena Markup está usando addEventListener para configurar detectores de eventos en sus etiquetas.

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

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

Esto permite que su HTML tenga detectores de eventos y esté seguro al no permitir atributos de detectores de eventos en línea inseguros y al mismo tiempo disfrutar de todas las ventajas de usar la API addEventListener.

Opciones de eventos

Debido a que Markup usa addEventListener detrás de escena, ofrece una sintaxis especial que le permite configurar opciones que no son posibles con HTML nativo.

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

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

Al proporcionar una tupla (matriz con dos valores), puede especificar el controlador y sus opciones que se utilizarán al configurar un detector de eventos.

Estas opciones son simplemente opciones addEventListener que le permiten especificar cómo se debe manejar el evento, incluida la definición de señales.

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
)