本文档详细介绍了 Svelte 的事件处理系统，解释了事件如何附加到 DOM 元素、事件委托如何工作以及 Svelte 的事件系统如何与响应式系统集成。有关组件事件和自定义事件创建的信息，请参阅组件通信。
Svelte 通过 on: 指令提供了一种声明式的方式来处理 DOM 事件。在后台，Svelte 实现了一个高效的事件系统，该系统支持事件委托、捕获阶段处理和被动事件，同时确保与 Svelte 的响应式系统的正确集成。
来源
Svelte 支持所有标准的 DOM 事件。事件处理程序使用针对不同事件类别的专用事件处理程序类型进行类型化。
| 事件类别 | 描述 | 处理程序类型 |
|---|---|---|
| 剪贴板事件 | 复制、剪切、粘贴 | ClipboardEventHandler |
| 组合事件 | 用于 IME 输入 | CompositionEventHandler |
| 焦点事件 | 焦点、模糊等 | FocusEventHandler |
| 表单事件 | 提交、更改等 | FormEventHandler |
| 键盘事件 | KeyDown、KeyUp、KeyPress | KeyboardEventHandler |
| 鼠标事件 | 点击、悬停等 | MouseEventHandler |
| 触摸事件 | TouchStart、TouchMove 等 | TouchEventHandler |
| 指针事件 | 现代指针设备事件 | PointerEventHandler |
| UI 事件 | 滚动、调整大小 | UIEventHandler |
| 滚轮事件 | 鼠标滚轮 | WheelEventHandler |
| 动画事件 | 动画开始/结束 | AnimationEventHandler |
| 过渡事件 | CSS 过渡 | TransitionEventHandler |
| 媒体事件 | 音频/视频播放 | EventHandler |
| 拖拽事件 | 拖放操作 | DragEventHandler |
来源
在 Svelte 中，使用 on: 指令后跟事件名称来将事件添加到元素。
事件处理程序可以是
事件处理程序接收标准的 DOM 事件对象作为参数，其类型根据正在处理的事件而定。
来源
Svelte 提供了事件处理的特殊修饰符，用于控制事件行为，无需额外的 JavaScript 代码。
| 修饰符 | 描述 |
|---|---|
capture | 在捕获阶段而不是冒泡阶段触发处理程序 |
once | 第一次运行后移除处理程序 |
passive | 通过触摸/滚轮事件提高滚动性能（从不调用 preventDefault()） |
nonpassive | 显式将 passive 设置为 false |
preventDefault | 在运行处理程序之前调用 event.preventDefault() |
stopPropagation | 在运行处理程序之前调用 event.stopPropagation() |
stopImmediatePropagation | 在运行处理程序之前调用 event.stopImmediatePropagation() |
self | 仅当 event.target 是元素本身时才触发处理程序 |
trusted | 仅当 event.isTrusted 为 true 时才触发处理程序 |
修饰符可以链式调用
可以使用 on:eventname:capture 语法来指定捕获阶段的事件监听器。
来源
Svelte 的事件系统区分两种类型的事件处理实现：
来源
事件委托是一种技术，它将单个事件监听器附加到父元素，而不是附加到多个子元素上。当事件发生时，系统会确定哪个子元素是目标，并执行相应的处理程序。
在 Svelte 中，委托事件处理程序直接存储在具有 __eventName 形式的属性的元素上。
委托系统
this 上下文和当前目标执行处理程序来源
create_event 函数负责将事件处理程序附加到 DOM 元素。
对于指针事件、触摸事件和滚轮事件，事件附加是通过微任务延迟的，以处理一个 Chrome 错误，该错误导致这些事件在克隆的 DOM 元素上无法正常工作。
来源
事件处理程序在 Svelte 的响应式上下文之外运行，以防止意外的副作用。 without_reactive_context 函数在执行事件处理程序之前会临时挂起当前响应和效果。
这确保了
来源
Svelte 支持多种事件绑定方式。
on:event={handler}on:event 将事件转发给父组件。最常见的形式是将 DOM 事件绑定到处理程序函数。
这会被编译成调用 Svelte 的内部事件系统，该系统会创建并附加适当的事件监听器。
对于带有水合的服务器端渲染，Svelte 支持捕获在水合完成之前发生的事件，并在水合完成后重放它们。
来源
在开发模式下，Svelte 会验证事件处理程序，以帮助捕获常见的错误。
() 时。apply 函数会检查这些问题并提供有用的警告。
来源
Svelte 为表单元素提供了特殊处理，将事件处理与表单功能集成。
对于输入、选择和文本区域等表单元素，事件处理通常与值绑定相关。
listen_to_event_and_reset_event 函数用于：
来源
某些元素具有特殊的事件处理要求。
音频和视频元素对 currentTime、volume 和播放状态等属性具有专门的事件处理。
对于像 currentTime 这样连续变化的属性，Svelte 会将 requestAnimationFrame 循环与标准的 timeupdate 事件结合，以实现平滑的更新。
来源
Svelte 通过 <svelte:window> 和 <svelte:document> 元素提供了窗口和文档事件的特殊处理。
窗口和文档绑定处理全局级别的事件，例如滚动、调整大小和焦点更改。
来源
Svelte 的事件处理系统提供了一种声明式且类型安全的方式来管理 DOM 事件，同时通过与框架的响应式系统无缝集成。该实现通过事件委托平衡了性能，并通过清晰的语法和有用的警告提供了开发者便利性。
该系统的主要优势包括：
通过其事件系统，Svelte 使 DOM 交互既易于编写又高效执行。