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

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

DOM事件

在下面的事例你将看到，您可以使用on:事件名来监听元素上的任何事件：

divon:mousemove={handleMousemove}Themousepositionis{m.x}x{m.y}/div

完整代码：

scriptletm={x:0,y:0};functionhandleMousemove(event){m.x=event.clientX;m.y=event.clientY;}/scriptdivon:mousemove={handleMousemove}Themousepositionis{m.x}x{m.y}/divstylediv{width:100%;height:100%;}/style内联处理

您还可以使用内联声明事件处理程序：

divon:mousemove={e=m={x:e.clientX,y:e.clientY}}Themousepositionis{m.x}x{m.y}/div

引号是可选的，但在某些环境中，它们有助于提高语法突显。

在某些框架中，您可能会看到由于性能原因而避免使用内联事件处理程序的建议，特殊是在循环中。这个建议并不适用于Svelte，编译器总是会做准确的事情，不管你选择哪种形式。

事件修饰符

DOM事件处理程序可以使用修饰符来改变其行为。例如，带有once修饰符的处理程序只运行一次：

scriptfunctionhandleClick(){alert(nomorealerts)}/scriptbuttonon:click|once={handleClick}Clickme/button

修饰符的完整列表：

preventDefault：在运行处理程序之前。例如，对于客户端窗体处理非常有用。

stopPropagation：阻止事件到达下一个元素。冒泡。

passive：提高触摸/滚轮事件的滚动性能（Svelte 会在安全的地方自动添加滚动）

nonpassive：可以查看使用 passive 改善的滚屏性能

capture：添加事件监听器时使用事件捕捉模式，即元素自身触发的事件先在此处理，然后才交由内部元素进行处理。

once：只响应一次

self：只当在event.target是当前元素自身时触发处理函数，即事件不是从内部元素触发的。

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

组件事件

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

scriptimport{createEventDispatcher}fromsvelte;constdispatch=createEventDispatcher();functionsayHello(){dispatch(message,{text:Hello!});}/script

当组件首次实例化时，必须调用createEventDispatcher。不可以在后续的函数中使用，例如setTimeout回调。这会使事件分发与组件实例绑定起来。

注重，由于on:message指令，App组件正在监听Inner组件发送的消息。这个指令是一个前缀为on:的属性，后面跟着我们要分发的事件名（在本例中是message）。

完整代码：

Inner.sevlte

scriptimport{createEventDispatcher}fromsvelte;constdispatch=createEventDispatcher();functionsayHello(){dispatch(message,{text:Hello!});}/scriptbuttonon:click={sayHello}Clicktosayhello/button

App.sevlte

scriptimportInnerfrom./Inner.svelte;functionhandleMessage(event){alert(event.detail.text);}/scriptInneron:message={handleMessage}/

假如没有on:message这个属性，消息仍旧会被发送，但是应用程序不会对此作出反应。您可以尝试删除on: message属性并再次按下按钮。

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

事件转发

与DOM事件不同，组件事件不会冒泡。假如希望监听某个嵌套深度很深的组件上的事件，则中间组件必须转发该事件。

在本例中，我们有与前面相同的App.svelte和Inner.svelte，但是现在有一个Outer.svelte组件包含 inner/。

来源：日常生活网

本文地址：https://www.15275.cn/jiankang/11560.html