处理斯维尔特的活动

了解如何处理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>

现在,我提到了“停止传播”。这是很常见的事情,例如停止表单提交事件。斯维尔特为我们提供修饰符,一种无需手动执行即可直接应用的方法。stopPropagationpreventDefault我认为,这是您最常使用的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

免费下载我的苗条手册


更多精妙的教程: