Svelte 中的事件输入

Svelte 是一个允许您创建高效和优雅的 Web 应用程序的框架。在 Svelte 中，事件输入允许您在组件中响应 DOM 事件。本文将介绍如何使用事件输入实现互动性体验。

注册事件

要注册事件，请使用语法 on:event-type={handler}。其中，event-type 是 DOM 事件类型，handler 是一个函数，由于 Svelte 是响应式的，所以该函数会在数据改变时自动重新运行。

例如，下面的代码片段使用 on:click 注册了一个点击事件：

<button on:click={increment}>Click me</button>

当用户点击这个按钮时，将会调用 increment 函数。下面是一个完整的例子：

<script>
  let count = 0;

  function increment() {
    count += 1;
  }
</script>

<p>The count is {count}</p>
<button on:click={increment}>Click me</button>

在上面的例子中，我们创建了一个计数器。当用户点击按钮时，increment 函数将 count 增加一，然后该计数器将在页面上更新。

传递事件参数

有时，您需要将事件处理程序作为参数传递给组件。比如，您可能想要传递一个值或事件对象。

要将参数传递给事件处理程序，请使用 $event 变量来访问事件对象。下面是一个例子：

<script>
  function handleClick(event) {
    alert(`You clicked the button! The event was: ${event.type}`);
  }
</script>

<button on:click={handleClick}>Click me</button>

在上面的例子中，当用户点击按钮时，将会显示一个弹出窗口，其中包含了事件类型，以及一些附加信息。

总结

事件输入使您可以在 Svelte 组件中响应 DOM 事件。您可以使用 on:event-type={handler} 语法来注册事件。您还可以使用 $event 变量来传递事件对象和其他参数。