在 Svelte 中，`on:click` 中的 `:` 是如何工作的？答案

【问题标题】：How does `:` in `on:click` work, in Svelte?在 Svelte 中，`on:click` 中的 `:` 是如何工作的？
【发布时间】：2020-03-12 01:23:04
【问题描述】：

我正在尝试使用 Svelte 并遵循官方教程。在https://svelte.dev/tutorial/reactive-assignments，我被指示使用这行代码：

<button on:click={handleClick}>

冒号的作用是什么？为什么不是简单的<button onclick=...？

我找到了Svelte API documentation on element directives，它提供了 Svelte 中的使用示例，但我仍然不明白这是如何有效的 JS 语法，或者它是如何转换成这样的。我不明白冒号是如何工作的（与理解它的用法是分开的）。

我可以理解这是一种为所有 DOM 事件属性实现单个指令的方法，但它的实际功能对我来说并不是那么透明。

【问题讨论】：

Vue 使用@click，Angular 使用(click) 等。如下所述，它无效，它通过一些编译运行。

标签： javascript html frontend dom-events svelte

【解决方案1】：

其他人已经解释了它被编译成 JavaScript 的意义，所以我将解决这部分：

为什么不是简单的<button onclick=...？

onclick 属性是现有的 HTML 属性（不应使用）。语义是非常不同的——当点击发生时，字符串值被评估为 JavaScript。这是一种不好的做法，因为您调用的任何函数都必须位于 global 范围内。

on:click 是一种 Sveltism，它将按钮的点击事件链接到本地定义的函数。 : 是一种通用语法，表示“这是一个指令而不是属性”——其中“指令”可以表示事件处理程序（on:... )、绑定 (bind:...)、转换 (in:.../out:.../transition:...) 等等。

【讨论】：

如果这是一个愚蠢的问题，请原谅我，svelte 是一个编译器，对吧？那么这是否意味着它使用 on:click 读取此文件并从中生成一些 JS 代码，这是浏览器最终运行的内容？它如何生成特定于平台的 JS 代码？
访问REPL，点击“JS输出”。一切都会揭晓
所以 Svelte 只是读取整个元素，在解析时，冒号告诉解析器 'on:' 是事件处理指令，冒号后面的位是指令的参数？接下来，它不能是“onclick”，因为它已经在 HTML 中使用，因此 Svelte 无法消除歧义（加上“这是不好的做法”/具有完全不同的语义位）？

【解决方案2】：

首先要了解的是，Svelte 组件中的代码实际上并不是发送给浏览器的生成的 JavaScript，所以：

我还是不明白这是怎么合法的 JS 语法

事实并非如此。它被 SvelteJS 的编译器“编译”成有效的 JavaScript。

我没有浏览源代码，但我假设在这种情况下，冒号用于表示事件本身 (click) 中的事件处理程序绑定指令 (on)。

编译的实际演示：您可以访问REPL并选择“Js输出”选项卡查看编译后的JavaScript代码。

【讨论】：

【解决方案3】：

在编译步骤之后，细长的<button on:click ... /> 成为该按钮上“单击”事件的普通事件侦听器。 getEventListeners(elem) 将揭示这一点。这就是为什么多个处理程序是可能的，例如<button on:click on:doWhatever...> 所以，相当于在纯js中添加elem.addEventListener()。

【讨论】：