DZone>Web Dev Zone>Svelte中的事件入门
Svelte中的事件入门
事件是设计良好的交互式应用体验的一个重要元素。因此，让我们来看看事件在Svelte中是如何工作的。
作者
CORE -
五月。19, 22 - Web Dev Zone -教程
喜欢 (1)
评论
保存
鸣叫
4.21K浏览次数
加入DZone社区，获得完整的会员体验。
Svelte中的事件是相当直观和容易使用的。在本指南中，我们将探讨如何开始使用Svelte事件。本指南假定你对 Javascript 有一定的了解。如果你是Svelte的新手，那么在开始之前，先阅读我的创建第一个Svelte应用程序的指南可能更有意义。
Svelte中的事件
当我们在Svelte中创建新的组件时，我们通常会希望它们在用户与之交互时做某些事情--例如，在它们上面悬停或点击它们。Svelte允许你使用通常在普通Javascript中发现的所有事件。关于Javascript事件的更多信息，请点击这里。
让我们从一个基本的例子开始。下面的组件来自于我写的关于 创建Svelte组件的文章，它创建了一个简单的计数器。
<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 函数。如果我们把on:click 完全从Comp.svelte ，那么尽管在我们的Comp组件上定义了on:click ，也不会触发任何事件。这意味着我们不仅可以定义一个子组件应该有一个事件附加在它身上，而且我们还可以通过把它添加到子组件本身来定义哪些特定的元素有这个事件。这给了我们很大的灵活性。
最后的思考
Svelte事件的使用非常简单，而且它们遵循与普通Javascript事件相同的命名规则，这使得它们的使用非常简单。在本指南中，我们已经介绍了一些基础知识，所以你可以开始使用。
JavaScript Svelte 事件
发布于DZone，由Johnny Simpson授权，DZone MVB。点击这里查看原文。
DZone贡献者所表达的观点属于他们自己。
DZone上的热门文章
评论
