Javascript 是否向svelte html表达式添加事件指令？

我想通过svelte中的html表达式添加一个自定义按钮。 通过这些文档，我可以使用@html标记来实现这一点

现在，我想向html字符串添加一个指令事件处理程序，即一个本地定义的函数，单击按钮时将调用该函数。到目前为止，我所尝试的：

{@html 
`
 <button
   on:click="${()=>doSomething()}">
   click me
 </button>
`
}

然而，正如我所预料的那样，它没有起作用。我在想可能有另一种方法，但到目前为止还没有想出一种方法。从概念上讲，使用@html指令相当于执行el.innerHTML=myHtmlString

换句话说，在HTML字符串的上下文中，您完全脱离了Svelte的领域，完全处于本机浏览器的领域

on:click是一种特殊的轻巧语法，浏览器不会处理它。因此，如果您希望在HTML字符串中包含事件，则需要返回原始HTML/JS。也就是说，改用onclick

当然，onclick的语义与on:click的语义完全不同。对于onclick，您只能传递一个字符串，该字符串将在事件发生时进行求值，而对于on:click，您传递一个函数引用，该函数引用将在事件发生时调用

为了清楚地说明这一点，让我们回顾一下Svelte的语法：

点击我 相反，在原始HTML中，这看起来像：

{@html'单击！' 请参阅重要的区别：使用onclick时，需要调用doSomething函数，否则单击时不会发生任何事情

现在，额外的乐趣：这个剂量测量功能需要在范围内可用。。。也就是说，您必须将其附加到窗口：

//注意：使用context=module避免将此函数添加到窗口 //多次 window.doSomething==>{…} {@html'单击！' 这太难看了。。。您可以这样做，以避免污染全球范围：

从“svelte”导入{onMount} 常数doSomething==>{…} onMount=>{ const btn=document.querySelector'grab-me' 顺便说一句，添加了Listener'click'，doSomething } {@html'单击！' 现在我们正在污染DOM ID。。。我们可以通过使用Svelte控制的元素包装来进一步避免这种情况，我们可以使用bind获取对该元素的引用：this={el}

总之，@html字符串中的动态元素是最好避免的，因为它们失去了所有的苗条的优点@html最适合于呈现静态html内容

为什么你想把你的按钮放在一个字符串中，而不是让苗条管理它

如果你真的需要走这条路，你可能也会感兴趣，我绝对不建议使用我永远不会在我自己的代码中使用它。。。但这可能会让您对您试图实现的目标有更深入的了解。

从概念上讲，使用@html指令相当于执行el.innerHTML=myHtmlString

换句话说，在HTML字符串的上下文中，您完全脱离了Svelte的领域，完全处于本机浏览器的领域

on:click是一种特殊的轻巧语法，浏览器不会处理它。因此，如果您希望在HTML字符串中包含事件，则需要返回原始HTML/JS。也就是说，改用onclick

当然，onclick的语义与on:click的语义完全不同。对于onclick，您只能传递一个字符串，该字符串将在事件发生时进行求值，而对于on:click，您传递一个函数引用，该函数引用将在事件发生时调用

为了清楚地说明这一点，让我们回顾一下Svelte的语法：

点击我 相反，在原始HTML中，这看起来像：

{@html'单击！' 请参阅重要的区别：使用onclick时，需要调用doSomething函数，否则单击时不会发生任何事情

现在，额外的乐趣：这个剂量测量功能需要在范围内可用。。。也就是说，您必须将其附加到窗口：

//注意：使用context=module避免将此函数添加到窗口 //多次 window.doSomething==>{…} {@html'单击！' 这太难看了。。。您可以这样做，以避免污染全球范围：

从“svelte”导入{onMount} 常数doSomething==>{…} onMount=>{ const btn=document.querySelector'grab-me' 顺便说一句，添加了Listener'click'，doSomething } {@html'单击！' 现在我们正在污染DOM ID。。。我们可以通过使用Svelte控制的元素包装来进一步避免这种情况，我们可以使用bind获取对该元素的引用：this={el}

总之，@html字符串中的动态元素是最好避免的，因为它们失去了所有的苗条的优点@html最适合于呈现静态html内容

为什么你想把你的按钮放在一个字符串中，而不是让苗条管理它

如果你真的需要走这条路，你可能也会感兴趣，我绝对不建议使用我永远不会在我自己的代码中使用它。。。但这可能会让你对你正在尝试的东西有更深入的了解 实现

{@html 
`
 <button
   on:click="${()=>doSomething()}">
   click me
 </button>
`
}