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

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

首先要了解的是，Svelte 组件中的代码实际上并不是发送到浏览器的结果 JavaScript，所以大约：

I still don't understand how this is valid JS syntax

不是。它被 SvelteJS 的编译器 "compiled" 转化为有效的 JavaScript。

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

对于编译的实际演示：您可以访问 REPL 和 select 的 "Js output" 选项卡以查看编译后的 JavaScript 代码。

Answer 2

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

Why isn't it simply <button onclick=...?

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

on:click 是一种 Sveltism，它将按钮的点击事件链接到本地定义的函数。 : 是一段通用的语法，表示 'this is a directive rather than an attribute' — 其中 'directive' 可以表示一个事件处理程序 (on:...)、一个绑定 (bind:...)、一个过渡 (in:.../out:.../transition:...) 等等。

Answer 3

在编译步骤之后，苗条 <button on:click ... /> 成为该按钮上事件 "click" 的正常事件侦听器。 getEventListeners(elem) 将揭示这一点。这就是为什么多个处理程序是可能的，例如 <button on:click on:doWhatever...> 因此，相当于在普通 js.

中添加 elem.addEventListener()

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

How does `:` in `on:click` work, in Svelte?

html

javascript

frontend

dom-events

svelte