‘in’in :click`` work，in Svelte？

Question

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

<button on:click={handleClick}>

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

我找到了关于元素指令的Svelte API文档，它在Svelte中提供了使用示例，但是我仍然不明白这是如何有效的JS语法，或者它是如何被转换成这样的。我不明白冒号是如何工作的(与理解它的用法不同)。

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

Answer 1

其他人已经解释了将其编译到JavaScript中的要点，因此我将讨论以下部分：

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

onclick属性是一个现有的HTML属性(不应该使用)。语义非常不同--当单击发生时，字符串值被计算为JavaScript。这是一种糟糕的做法，因为您调用的任何函数都必须位于全局范围内。

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

Answer 2

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