处理斯维尔特的活动

了解如何处理Svelte中的事件

监听DOM事件

在Svelte中，您可以使用以下命令直接在模板中为DOM事件定义一个侦听器：on:<event>句法。

例如，听click事件，您将一个函数传递给on:click属性。

听onmousemove事件，您将一个函数传递给on:mousemove属性。

这是内联定义处理函数的示例：

<button on:click={() => {
  alert('clicked')
}}>Click me</button>

这是另一个示例，其中定义了处理功能script组件部分：

<script>
const doSomething = () => {
  alert('clicked')
}
</script>
<button on:click={doSomething}>Click me</button>

当代码不太冗长时，我更喜欢使用内联。例如，如果只有2-3行，那么我将在脚本部分中将其上移。

Svelte将事件处理程序作为函数的参数传递，如果您需要停止传播或在事件对象：

<script>
const doSomething = event => {
  console.log(event)
  alert('clicked')
}
</script>
<button on:click={doSomething}>Click me</button>

现在，我提到了“停止传播”。这是很常见的事情，例如停止表单提交事件。斯维尔特为我们提供修饰符，一种无需手动执行即可直接应用的方法。stopPropagation和preventDefault我认为，这是您最常使用的2个修饰符。

您可以应用如下所示的修饰符：<button on:click|stopPropagation|preventDefault={doSomething}>Click me</button>

还有其他修饰符，这些修饰符更为小众。capture使能捕获事件而不是冒泡，once只会触发一次事件，self仅在事件的目标是该对象时才触发该事件（将其从冒泡/捕获层次结构中删除）。

在组件中创建事件

有趣的是，我们可以在组件中创建自定义事件，并使用内置DOM事件的相同语法。

为此，我们必须导入createEventDispatcher从功能svelte打包并调用它以获取事件分配器：

<script>
  import { createEventDispatcher } from 'svelte'
  const dispatch = createEventDispatcher()
</script>

完成后，我们可以致电dispatch()函数，传递一个标识事件的字符串（我们将用于on:其他使用此语法的组件中的语法）：

<script>
  import { createEventDispatcher } from 'svelte'
  const dispatch = createEventDispatcher()
//when it’s time to trigger the event
  dispatch(‘eventName’)
</script>

现在其他组件可以使用我们的

<ComponentName on:eventName={event => {
  //do something
}} />

您还可以将一个对象传递给事件，将第二个参数传递给dispatch()：

<script>
  import { createEventDispatcher } from 'svelte'
  const dispatch = createEventDispatcher()
  const value = 'something'
//when it’s time to trigger the event
  dispatch(‘eventName’, value)
//or

dispatch(‘eventName’, {
someProperty: value
})
</script>

传递的对象dispatch()可在event作为对象event.detail。

免费下载我的苗条手册

处理斯维尔特的活动

了解如何处理Svelte中的事件

监听DOM事件

在组件中创建事件

更多精妙的教程：