Svelte 事件深入浅出，让组件库创作者如虎添翼

当然，以下是关于 Svelte 系列 --- 事件的文章：

事件处理是交互式应用程序的基础。在 Svelte 中，事件处理非常简单。你只需在元素上添加一个 on: 前缀，然后是事件的名称，最后是事件处理函数。

例如，以下代码将为按钮添加一个 click 事件处理函数，当按钮被点击时，该函数将被调用：

<button on:click>Click me</button>

Svelte 事件处理函数与标准 JavaScript 事件处理函数非常相似。它们接受一个 event 对象作为参数，该对象包含有关事件的信息。例如，event.target 属性包含引发事件的元素。

Svelte 事件处理函数还可以使用 preventDefault() 和 stopPropagation() 方法来阻止事件的默认行为和阻止事件冒泡。

事件转发是组件库创作者的必备工具箱。组件库里的组件一般不处理事件响应，而是应该将这个响应移交使用端处理。

在 Svelte 中，有两种方法可以实现事件转发：

1. 使用 $on() 方法
2. 使用 <svelte:component this={this} on:{eventName}> 语法

$on() 方法可以用来监听组件内部发生的事件。例如，以下代码将监听按钮的 click 事件，并将事件转发到组件的父组件：

<script>
  export let onClick;

  $: on="$onClick", (e) => onClick(e)
</script>

<button on:click>Click me</button>

<svelte:component this={this} on:{eventName}> 语法可以用来将事件转发到父组件或祖先组件。例如，以下代码将监听按钮的 click 事件，并将事件转发到组件的祖先组件：

<svelte:component this={this} on:click>
  <button>Click me</button>
</svelte:component>

Svelte 事件处理非常简单，并且提供了很多强大的功能。通过使用事件转发，组件库创作者可以轻松地将事件转发到使用端处理，从而让组件库更加灵活和易用。

---