（5）svelte 教程：Inline Event Handlers（内联事件处理程序）

本文链接：https://blog.youkuaiyun.com/CoderPai/article/details/139403004

（5）svelte 教程：Inline Event Handlers（内联事件处理程序）

什么是 Inline Event Handlers

Inline Event Handlers（内联事件处理程序） 是指在 HTML 元素的属性中直接定义事件处理函数。当某个事件（如点击、输入等）发生时，这些处理函数会被调用。在 Svelte 中，内联事件处理程序通过 on: 前缀和内联的箭头函数来绑定事件处理。

逐行解释代码

我们来看一个具体的代码示例，然后逐行详细解释每个部分和参数的含义：

<script>
    let people = [
        { name: 'yoshi', beltColour: 'black', age: 25, id: 1 },
        { name: 'mario', beltColour: 'orange', age: 45, id: 2 },
        { name: 'luigi', beltColour: 'brown', age: 35, id: 3 }
    ];

    const handleClick = (e, id) => {
        people = people.filter(person => person.id != id);
        console.log(e);
    };
</script>

let people = [...]：
- 声明一个名为 people 的变量，并将其初始化为一个包含对象的数组。每个对象代表一个人，具有 name（名字）、beltColour（腰带颜色）、age（年龄）和 id（唯一标识符）属性。
const handleClick = (e, id) => { ... }：
- 声明一个名为 handleClick 的函数，该函数接收两个参数 e 和 id。
- e：事件对象，包含了事件相关的所有信息。当点击事件触发时，Svelte 会将事件对象传递给 handleClick 函数。
- id：当前点击的按钮所对应的 person 对象的唯一标识符，用于在数组中识别并删除该对象。
- people = people.filter(person => person.id != id);：使用 filter 方法创建一个新的 people 数组，过滤掉 id 与传入的 id 不匹配的 person 对象，实现删除功能。
- console.log(e);：在控制台输出事件对象，用于调试和查看事件的详细信息。

<main>
    {#each people as person (person.id)}
        <div>
            <h4>{person.name}</h4>
            <p>{person.age} years old, {person.beltColour} belt.</p>
            <button on:click={(e) => handleClick(e, person.id)}>delete</button>
        </div>
    {:else}
        <p>There are no people to show...</p>
    {/each}
</main>

部分

<main>：
- HTML <main> 元素，用于包裹组件的主要内容。
{#each people as person (person.id)}：
- Svelte 的 each 块，用于遍历 people 数组。people 数组中的每个元素（对象）被赋值给 person 变量，并在循环体内使用。
- (person.id)：这是一个键值表达式，用于帮助 Svelte 跟踪每个项的唯一性。通过 person.id，Svelte 可以高效地更新和重排 DOM。
<div>：
- HTML <div> 元素，用于包裹每个人的信息。
<h4>{person.name}</h4>：
- HTML <h4> 标题元素，使用 {person.name} 表达式将当前 person 对象的 name 属性值插入到标题中。
<p>{person.age} years old, {person.beltColour} belt.</p>：
- HTML <p> 段落元素，使用 {person.age} 和 {person.beltColour} 表达式将当前 person 对象的 age 和 beltColour 属性值插入到段落中。
<button on:click={(e) => handleClick(e, person.id)}>delete</button>：
- HTML <button> 按钮元素，使用 on:click 语法为按钮绑定点击事件。
- (e) => handleClick(e, person.id)：内联事件处理程序，定义一个箭头函数，当按钮被点击时，调用 handleClick 函数，并传递事件对象 e 和当前 person 对象的 id。
- handleClick(e, person.id)：调用 handleClick 函数，传递事件对象和 person 的 id，从而在 people 数组中删除相应的 person 对象。
{:else}：
- each 块的 else 分支，当 people 数组为空或未定义时，显示 else 分支中的内容。
<p>There are no people to show...</p>：
- 当 people 数组为空时，显示此段落文本，提示没有人可以显示。
{/each}：
- 结束 each 块。