什么叫事件（不为人知的秘闻悬案）

　　什么叫事件（不为人知的秘闻悬案）DOM事件
　　在下面的事例你将看到，您可以使用on：事件名来监听元素上的任何事件：divon：mousemove｛handleMousemove｝Themousepositionis｛m。x｝x｛m。y｝
　　完整代码：letm｛x：0，y：0｝；functionhandleMousemove（event）｛m。xevent。clientX；m。yevent。clientY；｝divon：mousemove｛handleMousemove｝Themousepositionis｛m。x｝x｛m。y｝div｛width：100；height：100；｝内联处理
　　您还可以使用内联声明事件处理程序：divon：mousemove｛m｛x：e。clientX，y：e。clientY｝｝Themousepositionis｛m。x｝x｛m。y｝
　　引号是可选的，但在某些环境中，它们有助于提高语法突显。
　　在某些框架中，您可能会看到由于性能原因而避免使用内联事件处理程序的建议，特别是在循环中。这个建议并不适用于Svelte，编译器总是会做正确的事情，不管你选择哪种形式。事件修饰符
　　DOM事件处理程序可以使用修饰符来改变其行为。例如，带有once修饰符的处理程序只运行一次：functionhandleClick（）｛alert（39；nomorealerts39；）｝buttonon：clickonce｛handleClick｝C
　　修饰符的完整列表：
　　preventDefault：在运行处理程序之前。例如，对于客户端窗体处理非常有用。
　　stopPropagation：阻止事件到达下一个元素。冒泡。
　　passive：提高触摸滚轮事件的滚动性能（Svelte会在安全的地方自动添加滚动）
　　nonpassive：可以查看使用passive改善的滚屏性能
　　capture：添加事件监听器时使用事件捕获模式，即元素自身触发的事件先在此处理，然后才交由内部元素进行处理。
　　once：只响应一次
　　self：只当在event。target是当前元素自身时触发处理函数，即事件不是从内部元素触发的。
　　你可以多个修饰符同时使用，例如：on：clickoncecapture｛。。。｝组件事件
　　组件也可以分发事件。为此，它们必须创建一个事件分发器：import｛createEventDispatcher｝from39；svelte39；；constdispatchcreateEventDispatcher（）；functionsayHello（）｛dispatch（39；message39；，｛text：39；Hello！39；｝）；｝
　　当组件首次实例化时，必须调用createEventDispatcher。不可以在后续的函数中使用，例如setTimeout回调。这会使事件分发与组件实例绑定起来。
　　注意，由于on：message指令，App组件正在监听Inner组件发送的消息。这个指令是一个前缀为on：的属性，后面跟着我们要分发的事件名（在本例中是message）。
　　完整代码：
　　Inner。import｛createEventDispatcher｝from39；svelte39；；constdispatchcreateEventDispatcher（）；functionsayHello（）｛dispatch（39；message39；，｛text：39；Hello！39；｝）；｝buttonon：click｛sayHello｝C
　　App。importInnerfrom39；。Inner。svelte39；；functionhandleMessage（event）｛alert（event。detail。text）；｝Inneron：message｛handleMessage｝
　　如果没有on：message这个属性，消息仍然会被发送，但是应用程序不会对此作出反应。您可以尝试删除on：message属性并再次按下按钮。
　　您还可以尝试将事件名称更改为其他名称。例如，在Inner。svelte中将dispatch（39；message39；）更改为dispatch（39；myevent39；），并在App。svelte组件中将属性名从on：message更改为on：myevent。事件转发
　　与DOM事件不同，组件事件不会冒泡。如果希望监听某个嵌套深度很深的组件上的事件，则中间组件必须转发该事件。
　　在本例中，我们有与前面相同的App。svelte和Inner。svelte，但是现在有一个Outer。svelte组件包含。