我正在尝试使用Slelte，并遵循官方教程。在https://svelte.dev/tutorial/reactive-assignments，我被指示使用这行代码：
<button on:click={handleClick}>字符串
冒号的作用是什么？为什么它不简单地是<button onclick=...？
我找到了有关element directive的Slelte API文档，其中提供了在Slelte中的用法示例，但是我仍然不明白这是如何成为有效的JS语法的，或者它是如何转换成这样的。我不明白冒号 * 是如何工作的 *（与理解它的 * 用法 * 分开）。
我可以理解，这是一种为所有DOM事件属性实现单个指令的方法，但它的实际功能对我来说并不那么透明。
4条答案
按热度按时间xtfmy6hx1#
其他人已经解释了它被编译成JavaScript的要点，所以我将解决这一部分：
为什么不是简单的
<button onclick=...？onclick属性是一个现有的HTML属性（你不应该使用）。语义非常不同-当点击发生时，字符串值被评估为JavaScript。这是一个不好的做法，因为你调用的任何函数都必须位于 global 范围内。on:click是一个Sveltism，它将按钮的单击事件链接到一个 * 本地 * 定义的函数。:是一个通用语法，表示“这是一个 * 指令 * 而不是一个 * 属性 *”-其中“指令”可以表示一个事件处理程序（on:...）、绑定（bind:...）、转换（in:.../out:.../transition:...）等等。pxiryf3j2#
首先要理解的是，Svelte组件中的代码实际上并不是发送到浏览器的结果JavaScript，所以：
我仍然不明白这是如何有效的JS语法
它不是。它被SvelteJS的编译器“编译”成有效的JavaScript。
我没有浏览源代码，但我假设在这种情况下，冒号用于表示事件本身（
click）的事件处理程序绑定指令（on）。对于编译的实际演示：您可以访问REPL并选择“Js输出”选项卡来查看编译后的JavaScript代码。
de90aj5v3#
在编译步骤之后，苗条的
<button on:click ... />变成了一个普通的事件侦听器，用于事件“click”on that button. getEventListeners（elem）将揭示这一点。这就是为什么多个处理程序是可能的，例如<button on:click on:doWhatever...> So，相当于在普通js中添加elem. addEventListeners（）。v09wglhw4#
从Svelte 5开始， prop 将被称为
onclick：https://svelte-5-preview.vercel.app/docs/event-handlers