时间戳

首页 > 解决方案 > 如何在 Svelte 中动态绑定事件？

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

问题描述

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

标签： javascriptsvelte

解决方案

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

推荐阅读