倾听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>
现在，我提到了 "停止传播"。这是一个非常常见的事情，例如，停止表单提交事件。Svelte为我们提供了修改器，一种直接应用它而不需要手动操作的方法。stopPropagation 和preventDefault 是你最常使用的两个修改器，我认为。
你像这样应用一个修改器。<button on:click|stopPropagation|preventDefault={doSomething}>Click me</button>
还有其他的修改器，这些修改器更小众。capture 可以捕获事件而不是冒泡，once 只触发一次事件，self 只在事件的目标是这个对象时才触发事件（把它从冒泡/捕获的层次中移除）。
在组件中创建你的事件
有趣的是，我们可以在组件中创建自定义事件，并且使用与内置DOM事件相同的语法。
要做到这一点，我们必须从svelte 包中导入createEventDispatcher 函数，并调用它来获得一个事件分配器。
<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 。
