DOM事件

非被动:可以查看被动提高的滚动性能。

捕获:添加事件侦听器时，使用事件捕获模式，即首先在这里处理元素本身触发的事件，然后由内部元素处理事件。

一次:只回应一次。

Self:仅当event.target是当前元素本身时触发处理程序，也就是说，事件不是从内部元素触发的。

您可以同时使用多个修饰符，例如:on:click | once | capture = { 0..}

组件事件

组件也可以分发事件。为此，他们必须创建一个事件分发服务器:

  import { createEventDispatcher } from \'svelte\';  const dispatch = createEventDispatcher();  function sayHello() {    dispatch(\'message\', {      text: \'Hello!\'    });  }

第一次实例化组件时，必须调用createEventDispatcher。不能在后续函数中使用，如setTimeout回调。这将把事件分发绑定到组件实例。

请注意，由于on:消息指令，应用程序组件正在侦听内部组件发送的消息。该指令是一个以on:为前缀的属性，后跟我们要分发的事件名称(在本例中是message)。

完整代码:

Inner.sevlte

  import { createEventDispatcher } from \'svelte\';  const dispatch = createEventDispatcher();  function sayHello() {    dispatch(\'message\', {      text: \'Hello!\'    });  }  Click to say hello

App.sevlte

  import Inner from \'./Inner.svelte\';  function handleMessage(event) {    alert(event.detail.text);  }

如果没有on:message属性，消息仍然会被发送，但是应用程序不会对它做出反应。您可以尝试删除on: message属性，然后再次按下按钮。

您也可以尝试将事件名称更改为其他名称。例如，将Inner.svelte中的dispatch (\'message \')更改为dispatch (\'myevent \')，并将App.svelte组件中的属性名称从on: message更改为on: myevent。

事件转发

与DOM事件不同，组件事件不会冒泡。如果您想要监听深度嵌套组件上的事件，中间组件必须转发该事件。

在这个例子中，我们有和以前一样的App.svelte和Inner.svelte，但是现在我们有一个包含的Outer.svelte组件。