开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第15天，点击查看活动详情

事件系统

介绍

• 事件是视图层到逻辑层的通讯方式。

• 事件可以将用户的行为反馈到逻辑层进行处理。

• 事件可以绑定在组件上，当达到触发条件，就会执行逻辑层中对应的事件函数。

• 事件对象可以携带额外信息，如 id、dataset、touches。

使用方式

若要在组件中绑定一个事件处理函数，如 onTap，则需要在该页面的 .js 文件中的 Page 里定义onTap 对应的事件处理函数。

在相应的 Page 中定义相应的事件处理函数 tapName,参数为事件对象 event。

控制台输出 event 信息如下所示：

使用组件（基础组件、扩展组件和自定义组件）时，组件里有哪些可用的事件取决于组件本身是否支持，支持的事件会在具体组件的文档里明确列出。

事件类型

事件分为冒泡事件和非冒泡事件：

• 冒泡事件：以关键字 on 为前缀，当组件上的事件被触发，该事件会向父节点传递。

• 非冒泡事件：以关键字 catch 为前缀，当组件上的事件被触发，该事件不会向父节点传递。

事件绑定的写法同组件的属性，以 key、value 的形式。

• key 以 on 或 catch 开头，然后跟上事件的类型，如 onTap、catchTap。

• value 是一个字符串，对应 Page 中定义的函数名，不存在时触发事件会报错
  上面代码中，点击 view3 会先后触发 handleTap3 和 handleTap2（因为 tap 事件会冒泡到 view2，而 view2 阻止了 tap 事件冒泡，不再向父节点传递），点击 view2 会触发 handleTap2，点击 view1 会触发 handleTap1。
  所有会发生冒泡的事件：

事件对象

组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。

BaseEvent 基础事件

BaseEvent 基础事件对象属性列表

• type：事件的类型
• timeStamp：事件生成时的时间戳
• target：dataset在组件中可以定义数据，这些数据将会通过事件传递给逻辑层。以data-开头，由连字符-连接多个单词，所有字母必须小写，如data-element-type，最终会在event.target.dataset中会将连字符转成驼峰elementType。
  示例代码：

触发事件的源组件对象，属性列表如下：

CustomEvent自定义事件对象

CustomEvent 自定义事件对象（继承自 BaseEvent），属性列表如下：

detail

自定义事件所携带的数据。表单组件事件会携带用户的输入信息，例如 switch 单选开关 onChange 触发时可通过 event.detail.value 获取用户选择的状态值，媒体的错误事件会携带错误信息，更多信息请参见各组件文档事件说明。

TouchEvent 触摸事件对象

TouchEvent 触摸事件对象（继承自 BaseEvent），属性列表：

touches 是一个数组，每个元素为一个 Touch 对象（ canvas 触摸事件中携带的 touches 是 CanvasTouch 的数组），表示当前停留在屏幕上的触摸点。
changedTouches 数据格式同 touches。 表示有变化的触摸点，如从无变有（touchstart），位置变化（touchmove），从有变无（touchend、touchcancel）。

Touch 对象

CanvasTouch 对象

示例

如 touchmove 事件，当用户触摸下例的组件。

页面中响应事件的处理函数 touchMoveHandle 会被调用，TouchEvent 触摸事件对象将作为参数传入。

打印结果：