\ Svelte 中的事件非常直观且易于使用。在本指南中，我们将了解如何开始使用 Svelte 事件。
\ 假设您对本指南的 Javascript 有很好的理解。如果您是 Svelte 的新手，那么在开始之前阅读我的关于创建您的第一个 Svelte 应用程序的指南可能会很有意义。
\
Svelte 有哪些活动？
当我们在 Svelte 中创建新组件时，我们通常希望它们在用户与它们交互时执行某些操作 – 例如，将鼠标悬停在它们上，或单击它们。 Svelte 允许您通常在 Vanilla Javascript 中找到的所有事件。
\ 让我们从一个基本示例开始。下面的组件创建了一个简单的计数器：
\
<script> // we write export let to say that this is a property // that means we can change it later! let x = 0; const addToCounter = function() { ++x; } </script> <button id="counter">{x}</button>
\ 每次用户点击按钮时，我们希望addToCounter触发，它会将x增加 1，并在按钮本身内显示它。为此，我们将添加一个事件。
\ 下面是当用户点击按钮时我们需要添加的事件：
\
<button id="counter" on:click={addToCounter}>{x}</button>
\ 我们在 Svelte 中使用{}表示该属性的值是 Javascript。任何有效的 Javascript 事件都可以用来代替click 。
\ 例如，每当鼠标移到button上时，以下内容都会增加计数器：
\
<button id="counter" on:mouseover={addToCounter}>{x}</button>
\ 同样，您可以使用其他 Javascript 事件，例如click 、 scroll 、 hover 、 mouseup 、 pointerup 、 pointerdown 、 mousedown等。这些只是示例 – 但可以使用您想要使用的任何 Javascript 事件。
\
如何访问 Svelte 事件中的事件数据？
有时，我们希望在用户与我们的组件交互时访问e或event数据。 event对象携带了很多关于触发事件的有用信息。为此，我们只需将处理程序更改为函数。
\ 例如，让我们检索按钮的点击位置，并将其显示给用户。
\
<script> // we write export let to say that this is a property // that means we can change it later! let x = 0; let click = [0, 0] const addToCounter = function(e) { click[0] = e.clientX; click[1] = e.clientY; ++x; } </script> <button id="counter" on:click={(e) => { addToCounter(e) }}> Clicked {x} times, last at {click[0]}, {click[1]} </button>
\ 在这里，我们将e.clientX和e.clientY存储在一个变量中，并在单击按钮时将其显示给用户。
\ 对于那些不知道的人， e.clientX和e.clientY都指的是触发事件时光标位置的一个方面。
\ Svelte 天生具有反应性，因此无论何时单击该按钮都会使用最新数据自动更新。
\
Svelte 事件转发
事件转发是每当用户触发子组件上的事件时，我们希望在父组件中处理该事件。它本质上是说这个组件可以有一个特定的事件，但这里不做处理。
\ 看我们之前的例子，我们可以先设置事件转发，在子组件上设置可以转发的事件。
\ 假设我们在名为Comp.svelte的文件中创建了一个组件，该文件如下所示。一个按钮是可点击的，而另一个是不可点击的。
\
<button on:click> Click me, I am a button </button> <button> I am unclickable. Ignore me. </button>
\ 这里我们说第一个按钮有一个有效on:click事件。这很有用，因为它允许我们在组件中定义某些元素，其中包含可以向上转发的有效事件。然后，在我们的父级中，我们可以导入我们的按钮，如下所示：
\
<script> import Comp from './Comp.svelte'; let x = 0; const addToCounter = () => { ++x; } </script> <Comp on:click={addToCounter} />
\ 现在，当用户单击Comp中的第一个button时，它将触发on:click事件并运行addToCounter函数。如果我们从Comp.svelte完全删除on:click ，那么尽管在Comp组件上定义on:click ，但不会触发任何事件。
\ 这意味着我们不仅可以定义子组件应该附加一个事件，而且我们还可以通过将其添加到子组件本身来定义哪些特定元素具有该事件。这给了我们很大的灵活性。
\
最后的想法
Svelte 事件使用起来很简单，而且它们遵循与 Vanilla Javascript 事件相同的命名约定，这使得它们非常易于使用。
\ 在本指南中，我们介绍了基础知识，以便您开始使用。
也在这里发布
原文： https://hackernoon.com/a-basic-introduction-to-event-handling-in-svelte-for-beginners?source=rss