活动
HTML 允许您使用 on* 属性设置内联事件侦听器。这几乎就是在 Markup 中的标签上设置事件侦听器的方式。
javascript
const handleClick = (event) => {
console.log(event)
}
html`<button onclick="${handleClick}">click me</button>`与 Markup 的最大区别在于，这些属性不会渲染，并且在幕后 Markup 使用 addEventListener 在标签上设置事件侦听器。
javascript
html`<button onclick="${handleClick}">click me</button>`.render(document.body)
// renders: <button>click me</button>这允许您的 HTML 拥有事件侦听器，并且通过不允许不安全的内联事件侦听器属性来确保安全，同时仍然享受使用 addEventListener API 的所有优势。
活动选项
由于 Markup 在后台使用 addEventListener，因此它提供了一种特殊的语法，允许您设置本机 HTML 无法设置的选项。
javascript
const handleClick = (event) => {
console.log(event)
}
html`<button onclick="${[handleClick, { once: true }]}">
click me
</button>`.render(document.body)通过提供元组（具有两个值的数组），您可以指定设置事件侦听器时要使用的处理程序及其选项。
这些选项只是 addEventListener 选项，允许您指定如何处理事件，包括定义信号。
javascript
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
)