如何在 Svelte 中动态绑定事件？答案

【问题标题】：How to bind events dynamically in Svelte?如何在 Svelte 中动态绑定事件？
【发布时间】：2020-07-11 01:24:09
【问题描述】：

在 JSX 中，可以像这样将多个事件绑定到一个 DOM 元素：

<input {...inputEvents}>

在 Svelte 中，这是手动完成的。

<input on:input={inputHandler}>

当您需要将多个处理程序（输入、模糊、焦点）添加到表单的多个输入时，这会变得乏味。

我发现在 Svelte 中解决此问题的唯一方法是使用 refs。

例如：

<input bind:this={myInput}>

然后在某个地方这样做：

myInput.oninput = (event) => {
  // do something
}

或者：

myInput.addEventListener('click', (event) => {
  // do something
})

有没有更好的方法在 Svelte 中动态绑定事件？

【问题讨论】：

不幸的是，没有 :( 我了解到 sveltejs 的动态性远低于预期...您的解决方案可能是最好的方法。
focusin 和 focusout 冒泡，而 focus 和 blur 不会冒泡 (Focus Events)。您是否考虑过仅在表单元素上附加处理程序并使用Event.target 来路由处理，可能会将特定于元素的数据留在custom data attributes 中？
一种解决方法，但您可以使用use: 操作。示例：svelte.dev/repl/6d70347b8b164ce9a0216ca859713655?version=3.20.1
嘿@PeerReynders，这是个好主意！
GH 问题：github.com/sveltejs/svelte/issues/5112

标签： javascript svelte

【解决方案1】：

如果您需要将相同或相似的事件处理程序集附加到各种元素，则可以将“操作”与use:action 一起使用（参考：https://svelte.dev/docs#template-syntax-element-directives-use-action）

这是一个例子：

<script>
  function manyHandlers(element){
    element.addEventListener("click", ev => {...})
    element.addEventListener("focus", ev => {...})
    element.addEventListener("blur", ev => {...})
    ...
  }
</script>

<form>
  <input use:manyHandlers>
  <textarea use:manyHandlers></textarea>
  <!-- and so on... -->
</form>

您可以将其他参数传递给use:___ 中指定的函数，例如控制附加的事件处理程序集。有关其工作原理，请参阅上述文档参考。

此外，如 cmets 中所述，您可以利用事件冒泡并将事件处理程序附加到父元素（例如：上例中的 <form> 元素）并使用 event.target 进行特定处理与接收事件的元素。

【讨论】：