事件是用户与网页交互的核心部分。在 Svelte 中，事件处理相当简洁且功能强大，支持多种事件类型和事件处理方法，包括基础的事件绑定、自定义事件、组件间事件传递等。在本教程中，我们将详细介绍 Svelte 的事件功能，帮助你灵活地在组件中处理各种事件。
基本事件绑定
Svelte 支持使用 on:事件名 语法来为 HTML 元素绑定事件监听器。例如，我们可以为按钮绑定点击事件，并在点击时触发处理函数。
创建一个按钮并绑定点击事件
在以下代码中，我们创建了一个按钮，并绑定了 on:click 事件：
<!-- src/App.svelte -->
<script>function handleClick() {alert('Button clicked!');}
</script><button on:click={handleClick}>Click Me</button>
在这里，on:click={handleClick} 将点击事件绑定到 handleClick 函数，当用户点击按钮时，浏览器会弹出 Button clicked! 的提示。
内联事件处理
Svelte 还支持内联事件处理，即在事件监听器中直接书写 JavaScript 表达式。
<button on:click={() => alert('Inline Button Clicked!')}>Inline Click</button>
这种方式适合处理简单的逻辑，但对于复杂逻辑，建议还是单独定义一个处理函数，以保持代码整洁。
事件参数传递
在实际开发中，事件处理函数通常需要获取事件对象或其他参数。Svelte 事件绑定支持直接获取事件对象，甚至传递额外参数。
获取事件对象
通过将事件对象作为参数传递给处理函数，可以访问事件的详细信息。以下代码展示了如何传递 event 对象：
<script>function handleClick(event) {console.log(event);alert(`Clicked at position (${event.clientX}, ${event.clientY})`);}
</script><button on:click={handleClick}>Click for Event Info</button>
在这里，event 对象包含点击位置等详细信息，event.clientX 和 event.clientY 表示点击的横纵坐标。
传递自定义参数
如果需要在事件处理函数中使用自定义参数，可以通过箭头函数传递：
<script>function handleGreet(name) {alert(`Hello, ${name}!`);}
</script><button on:click={() => handleGreet('Alice')}>Greet Alice</button>
<button on:click={() => handleGreet('Bob')}>Greet Bob</button>
此处，handleGreet 函数接收 name 参数，我们在 on:click 中通过箭头函数将自定义参数传递给处理函数。
事件修饰符
Svelte 提供了事件修饰符来简化常见的事件处理需求，包括阻止默认行为、阻止事件冒泡等。以下是常用的事件修饰符：
preventDefault：阻止默认行为。stopPropagation：阻止事件冒泡。self：仅当事件在绑定元素本身触发时才响应。
使用 preventDefault
在以下示例中，preventDefault 阻止了表单的默认提交行为：
<script>function handleSubmit() {alert('Form submitted!');}
</script><form on:submit|preventDefault={handleSubmit}><input type="text" placeholder="Enter text" /><button type="submit">Submit</button>
</form>
使用 stopPropagation
stopPropagation 可防止事件冒泡，适合在子元素中处理事件而不影响父元素的事件。
<script>function handleOuterClick() {alert('Outer div clicked!');}function handleInnerClick() {alert('Inner div clicked!');}
</script><div on:click={handleOuterClick} style="padding: 20px; background: #f4f4f9;">Outer Div<div on:click|stopPropagation={handleInnerClick} style="padding: 10px; background: #e0e0e5;">Inner Div</div>
</div>
点击内部 Inner Div 时，stopPropagation 阻止了事件冒泡，因此不会触发外层 Outer Div 的点击事件。
使用 self
self 修饰符确保只有事件在绑定元素本身触发时才会响应，例如在捕获 div 上的点击事件时忽略其子元素的点击事件：
<div on:click|self={() => alert('Clicked on div itself!')}>Click here!<span>Clicking me won’t trigger the alert.</span>
</div>
自定义事件
除了内置的 DOM 事件，Svelte 组件可以触发自定义事件并传递给父组件。这使得组件之间的通信更加灵活。
创建自定义事件
可以通过 Svelte 提供的 createEventDispatcher 函数创建并分发自定义事件。例如，在一个 Toggle.svelte 组件中，我们创建并触发一个 toggle 事件：
<!-- src/Toggle.svelte -->
<script>import { createEventDispatcher } from 'svelte';const dispatch = createEventDispatcher();function handleToggle() {dispatch('toggle', { message: 'Toggled!' });}
</script><button on:click={handleToggle}>Toggle</button>
在这里，我们使用 createEventDispatcher 创建了 dispatch 函数，调用 dispatch('toggle', { message: 'Toggled!' }) 来触发 toggle 事件，并传递一个包含 message 属性的对象作为事件数据。
监听自定义事件
在 App.svelte 中引入并监听 Toggle 组件的 toggle 事件：
<script>import Toggle from './Toggle.svelte';function handleToggle(event) {alert(event.detail.message);}
</script><Toggle on:toggle={handleToggle} />
当 Toggle 组件的按钮被点击时，toggle 事件会触发，handleToggle 函数接收事件对象，并通过 event.detail 访问自定义数据。
事件转发
在嵌套组件结构中，子组件的事件可以通过事件转发传递给更上层的组件。通过这种方式，不需要在每层组件中重新定义事件，而是直接转发给父组件。
创建一个嵌套组件
假设我们有一个 Outer.svelte 组件，内部包含一个 Inner.svelte 子组件。我们希望 Inner 中的点击事件能够传递到 App.svelte 中。
<!-- src/Inner.svelte -->
<script>import { createEventDispatcher } from 'svelte';const dispatch = createEventDispatcher();function handleClick() {dispatch('customClick', { message: 'Inner component clicked!' });}
</script><button on:click={handleClick}>Click Inner</button>
<!-- src/Outer.svelte -->
<script>import Inner from './Inner.svelte';
</script><div><Inner on:customClick />
</div>
事件转发
在 Outer.svelte 中，我们不需要处理 customClick 事件，而是直接转发到 App.svelte。然后，在 App.svelte 中可以监听该事件。
<script>import Outer from './Outer.svelte';function handleCustomClick(event) {alert(event.detail.message);}
</script><Outer on:customClick={handleCustomClick} />
此时，点击 Inner 组件的按钮时，事件会沿组件层次结构向上传递到 App.svelte，而不需要在 Outer.svelte 中显式处理事件。
总结
在 Svelte 中，事件机制简化了组件间的交互。通过基础的事件绑定、事件修饰符、自定义事件和事件转发，你可以轻松实现灵活且高效的事件管理：
- 基础事件绑定：通过
on:事件名绑定常见事件。 - 事件修饰符：借助
preventDefault、stopPropagation等修饰符控制事件行为。 - 自定义事件：使用
createEventDispatcher实现组件通信。 - 事件转发：在嵌套组件中简化事件层级传递。
掌握这些事件处理方法，你可以为用户交互创建更加响应灵活的组件，使应用更具用户友好性与扩展性。
