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

Question

在 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 中动态绑定事件？

Answer 1

如果您需要将相同或相似的事件处理程序集附加到各种元素，那么您可以使用“actions” 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对接收事件的元素进行特定处理。