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

【实践所得】

<script>

import wepy from 'wepy'

import api from '../api/api'

export default class schoolQA extends wepy.page {

config = {

navigationBarTitleText: '学校问答'

}

data = {

nav: {

bar: ['问答投放', '问答列表'],

currentTab: 0

},

radioItems: [{

name: 7,

value: '7天'

}, {

name: 25,

value: '25天'

name: 30,

value: '30天'

}],

apiRes: {},

notHere: {},

input: {}

restVal() {

this.apiRes = {}

<input type="search" class="weui-search-bar__input" placeholder="请输入关键词" value="{{input.question}}" name="keyword" maxlength="30" auto-focus @input="getQARecommenderQ" />

通过

this.input={}

this.apiRes={}

来置空输入数据，重置页面

this.apiRes,this.input 作用可以认为是事件数据线

事件

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

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

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

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

在组件中绑定一个事件处理函数。

如​<code>​bindtap​</code>​，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

在相应的Page定义中写上相应的事件处理函数，参数是event。

可以看到log出来的信息大致如下：

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

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。

非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

WXML的冒泡事件列表：

<col>

类型

触发条件

最低版本

touchstart

手指触摸动作开始

touchmove

手指触摸后移动

touchcancel

手指触摸动作被打断，如来电提醒，弹窗

touchend

手指触摸动作结束

tap

手指触摸后马上离开

longpress

手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发

​​1.5.0​​

longtap

手指触摸后，超过350ms再离开（推荐使用longpress事件代替）

transitionend

会在 WXSS transition 或 wx.createAnimation 动画结束后触发

animationstart

会在一个 WXSS animation 动画开始时触发

animationiteration

会在一个 WXSS animation 一次迭代结束时触发

animationend

会在一个 WXSS animation 动画完成时触发

touchforcechange

在支持 3D Touch 的 iPhone 设备，重按时会触发

​​1.9.90​​

注：除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如​​&lt;form/&gt;​​的​<code>​submit​</code>​事件，​​&lt;input/&gt;​​的​<code>​input​</code>​事件，​​&lt;scroll-view/&gt;​​的​<code>​scroll​</code>​事件，(详见各个​​组件​​)

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

key 以​<code>​bind​</code>​或​<code>​catch​</code>​开头，然后跟上事件的类型，如​<code>​bindtap​</code>​、​<code>​catchtouchstart​</code>​。自基础库版本 ​​1.5.0​​ 起，在非​​原生组件​​中，​<code>​bind​</code>​和​<code>​catch​</code>​后可以紧跟一个冒号，其含义不变，如​<code>​bind:tap​</code>​、​<code>​catch:touchstart​</code>​。

value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。

​<code>​bind​</code>​事件绑定不会阻止冒泡事件向上冒泡，​<code>​catch​</code>​事件绑定可以阻止冒泡事件向上冒泡。

如在下边这个例子中，点击 inner view 会先后调用​<code>​handleTap3​</code>​和​<code>​handleTap2​</code>​(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发​<code>​handleTap2​</code>​，点击 outer view 会触发​<code>​handleTap1​</code>​。

自基础库版本 ​​1.5.0​​ 起，触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用​<code>​capture-bind​</code>​、​<code>​capture-catch​</code>​关键字，后者将中断捕获阶段和取消冒泡阶段。

在下面的代码中，点击 inner view 会先后调用​<code>​handleTap2​</code>​、​<code>​handleTap4​</code>​、​<code>​handleTap3​</code>​、​<code>​handleTap1​</code>​。

如果将上面代码中的第一个​<code>​capture-bind​</code>​改为​<code>​capture-catch​</code>​，将只触发​<code>​handleTap2​</code>​。

如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。

BaseEvent 基础事件对象属性列表：

属性

说明

​​type​​

String

事件类型

​​timeStamp​​

Integer

事件生成时的时间戳

​​target​​

Object

触发事件的组件的一些属性值集合

​​currentTarget​​

当前组件的一些属性值集合

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

​​detail​​

额外的信息

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

​​touches​​

Array

触摸事件，当前停留在屏幕中的触摸点信息的数组

​​changedTouches​​

触摸事件，当前变化的触摸点信息的数组

特殊事件： ​<code>​&lt;canvas/&gt;​</code>​ 中的触摸事件不可冒泡，所以没有 currentTarget。

代表事件的类型。

页面打开到触发事件所经过的毫秒数。

触发事件的源组件。

id

事件源组件的id

tagName

当前组件的类型

​​dataset​​

事件源组件上由​<code>​data-​</code>​开头的自定义属性组成的集合

事件绑定的当前组件。

当前组件的id

当前组件上由​<code>​data-​</code>​开头的自定义属性组成的集合

说明： target 和 currentTarget 可以参考上例中，点击 inner view 时，​<code>​handleTap3​</code>​ 收到的事件对象 target 和 currentTarget 都是 inner，而 ​<code>​handleTap2​</code>​ 收到的事件对象 target 就是 inner，currentTarget 就是 middle。

在组件中可以定义数据，这些数据将会通过事件传递给 SERVICE。 书写方式： 以​<code>​data-​</code>​开头，多个单词由连字符​<code>​-​</code>​链接，不能有大写(大写会自动转成小写)如​<code>​data-element-type​</code>​，最终在 event.currentTarget.dataset 中会将连字符转成驼峰​<code>​elementType​</code>​。

示例：

touches 是一个数组，每个元素为一个 Touch 对象（canvas 触摸事件中携带的 touches 是 CanvasTouch 数组）。 表示当前停留在屏幕上的触摸点。

identifier

Number

触摸点的标识符

pageX, pageY

距离文档左上角的距离，文档的左上角为原点 ，横向为X轴，纵向为Y轴

clientX, clientY

距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴

特殊说明

x, y

距离 Canvas 左上角的距离，Canvas 的左上角为原点 ，横向为X轴，纵向为Y轴

changedTouches 数据格式同 touches。 表示有变化的触摸点，如从无变有（touchstart），位置变化（touchmove），从有变无（touchend、touchcancel）。

自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息，详见​​组件​​定义中各个事件的定义。

点击事件的​<code>​detail​</code>​ 带有的 x, y 同 pageX, pageY 代表距离文档左上角的距离。