javascript - 如何在 Svelte 中动态绑定(bind)事件？

Question

在 JSX 中，可以将多个事件绑定(bind)到一个 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 中动态绑定(bind)事件？

Answer 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:___ 中指定的函数。 ，例如控制附加哪组事件处理程序。有关其工作原理，请参阅上述文档引用。
此外，如评论中所述，您可以利用事件冒泡并将事件处理程序附加到父元素(例如:上例中的 <form> 元素)并使用 event.target对接收到事件的元素进行特定处理。