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

（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 块。

代码总结

这个 Svelte 组件定义了一个 people 数组，并使用 each 块遍历该数组中的每个对象。在每次循环中，它会创建一个包含该对象信息的 <div> 元素，并为每个 <button> 按钮绑定点击事件。点击按钮时，会调用 handleClick 函数，删除相应的 person<