使用 on:click 转发事件
使用原始的 on: 指令将组件事件重新发射给父组件。
使用 on:click 转发事件 是 CoddyKit 上的免费 Sveltejs Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Sveltejs Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Sveltejs Academy 课程共包含 4 节课。
事件转发
若要将子元素的事件通过您的组件重新发出，可以在没有处理函数的情况下编写 on:event。
基本转发
这样会将内部按钮的点击事件转发给 MyButton 的使用方。
<button on:click>Click</button>作为父组件进行监听
父组件监听该组件的方式与监听 DOM 元素相同。
<MyButton on:click={handle} />转发多个事件
您可以转发任意数量的原生事件。
<input on:input on:focus on:blur />包装组件的优势
这种模式对于构建按钮、输入框和链接等包装组件至关重要。
与自定义事件结合
您可以自由地将转发的 DOM 事件与自己的 createEventDispatcher 事件结合使用。
保留事件对象
转发的事件到达父组件时，原始 DOM 事件对象会保持完整。
无需使用修饰符
如果希望由父组件负责修饰符，请不要在子组件上添加修饰符。
与自定义事件的区别
转发会重新发出真实的 DOM 事件；自定义分发则会创建新事件。
适用于 TypeScript
当父组件在 TypeScript 中声明转发事件时，这些事件仍会保留精确的类型。
实际应用
大多数设计系统组件都使用事件转发，从而无需列出每个属性也能保持灵活。
快速检查
没有处理函数的 on:click 有什么作用？
回顾
不带处理函数的 on:event 指令会将 DOM 事件向上转发给组件的父组件，从而实现简洁的包装组件接口。
用 AI 导师学习 HTML — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 41
- 课程
- 163
常见问题解答
「使用 on:click 转发事件」课时是免费的吗？
是的 — 「使用 on:click 转发事件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Sveltejs Academy 课程的其余内容，请升级到 CoddyKit PRO。 Sveltejs Academy 课程共包含 4 节课。
「使用 on:click 转发事件」这节课中我会学到什么？
使用原始的 on: 指令将组件事件重新发射给父组件。 你通过在浏览器中直接运行的动手代码来练习 Sveltejs Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Sveltejs Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Sveltejs Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「使用 on:click 转发事件」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Sveltejs Academy 课中编写并运行代码吗？
能。每节 Sveltejs Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- on:click、on:input、on:submit
- 事件修饰符：preventDefault、stopPropagation、once
- 使用 createEventDispatcher 创建自定义事件
- 使用 on:click 转发事件