javascript - 在 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

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

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

onclick 属性是现有的 HTML 属性(不应使用)。语义是非常不同的——当点击发生时，字符串值被评估为 JavaScript。这是一种不好的做法，因为您调用的任何函数都必须位于全局范围内。
on:click 是一种 Sveltism，它将按钮的点击事件链接到本地​​定义的函数。 : 是一种通用语法，表示“这是一个指令而不是属性”——其中“指令”可以表示事件处理程序 ( on:...)、绑定(bind) ( bind:...)、转换 ( in:.../ out:.../ transition:...) 和很快。