事件绑定

事件绑定使用 @event=${handler}。

const submit = (event: Event): void => {
  event.preventDefault();
};

export const FormButton = defineHtml(` <button @click=${submit}>提交</button> `);

框架会把原生事件作为 handler 的第一个参数传入。自定义组件事件则是 CustomEvent，业务数据在 event.detail：

const select = (event: CustomEvent<{ id: string }>): void => {
  save(event.detail.id);
};

defineHtml(`<user-picker @select=${select}></user-picker>`);

传参

const remove = (id: string): void => {
  items.set(items.peek().filter((item) => item.id !== id));
};

defineHtml(` <button @click=${(event) => remove(item.id, event)}>删除</button> `);

修饰符

常见事件修饰符放在“指令 / 事件修饰符”里：

<form @submit.prevent="submit"></form>
<button @click.stop="select"></button>

WARNING

宏组件里推荐优先写 TypeScript handler，复杂逻辑不要塞进模板。