了解如何处理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入门-简短教程
- 如何在斯维尔特使用道具
- 如何在Svelte中导入组件
- 如何从Svelte组件导出函数和变量
- 苗条的模板:条件逻辑
- 如何按需重新渲染Svelte组件
- 苗条的插槽
- 如何在Svelte模板中添加评论
- 苗条的绑定
- 在Svelte中处理状态更新
- Svelte中的反应性陈述
- 苗条的生命周期事件
- 苗条的模板:循环
- 解决Svelte模板中的承诺
- 处理斯维尔特的活动
- 斯维尔特的跨组件状态管理
- 如何在脚本模块外部的Sapper中访问URL参数
- 如何在Svelte中动态应用CSS
- 如何在Sapper中重定向到URL
- 如何在Svelte模板中模拟for循环