Question

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

<button on:click={handleClick}>

结肠的目的是什么？为什么不简单地<button onclick=...？

我找到了Svelte API documentation on element directives，它提供了Svelte内的用法示例，但是我仍然不明白这是如何有效的JS语法，或者如何转换成这样的语法。我不了解结肠的工作方式（与理解其用法不同）。

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

Answer 1

其他人已经解释了将其编译为JavaScript的要点，因此我将介绍这一部分：

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

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

on:click是一种Sveltism，将按钮的click事件链接到本地定义的函数。 :是一种通用语法，它表示“这是一个指令而不是 attribute ”，其中“指令”可以表示事件处理程序（{ {1}}，绑定（on:...），过渡（bind:... / in:... / out:...）等。

Answer 2

首先要了解的是，Svelte组件中的代码实际上不是发送到浏览器的最终JavaScript，因此：

我仍然不明白这是如何有效的JS语法

不是。 SvelteJS的编译器会将其“编译”为有效的JavaScript。

我还没有漫游源代码，但是在这种情况下，我假定冒号用于表示事件本身（on）的事件处理程序绑定指令（click）。 / p>

有关编译的实际演示：您可以访问REPL并选择“ Js output”标签，以查看编译的JavaScript代码。

Answer 3

苗条的<button on:click ... />在编译步骤后成为该按钮上“单击”事件的正常事件侦听器。 getEventListeners（elem）将揭示这一点。这就是为什么可以使用多个处理程序的原因，例如<button on:click on:doWhatever...> 因此，等效于在普通js中添加elem.addEventListener（）。

Svelte中on：click中的`：`如何工作？

3 个答案: