一、什么是事件
1、事件是视图层到逻辑层的通讯方式。
2、事件可以将用户的行为反馈到逻辑层进行处理。
3、事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
4、事件对象可以携带额外信息，如 id, dataset, touches。
二、事件的使用方式
1、在组件中绑定一个事件处理函数。如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。
点击(此处)折叠或打开
- view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click /view>
2、在相应的Page定义中写上相应的事件处理函数，参数是event。
点击(此处)折叠或打开
- Page({
- tapName: function(event) {
- console.log(event)
- }
- })
之后就可以在控制台看到相应的输出信息，当然在处理事件的时候，打印是最常用的调试手段。从上面的案例可以看到，bindtap的值和js文件中的处理函数名字要一样，这样才可以形成一一对应
三、事件的分类
事件分为冒泡事件和非冒泡事件
1、冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
2、非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
Wxml的冒泡事件列表
| 类型 |
触发条件 |
| touchstart |
手指触摸动作开始 |
| touchmove |
手指触摸后移动 |
| touchcancel |
手指触摸动作被打断，如来电提醒，弹窗 |
| touchend |
手指触摸动作结束 |
| tap |
手指触摸后马上离开 |
| longpress |
手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发 |
| longtap |
手指触摸后，超过350ms再离开（推荐使用longpress事件代替） |
| transitionend |
会在 WXSS transition 或 wx.createAnimation 动画结束后触发 |
| animationstart |
会在一个 WXSS animation 动画开始时触发 |
| animationiteration |
会在一个 WXSS animation 一次迭代结束时触发 |
| animationend |
会在一个 WXSS animation 动画完成时触发 |
| touchforcechange |
在支持 3D Touch 的 iPhone 设备，重按时会触发 |
注：除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如
的 submit 事件，的 input 事件，的 scroll 事件，(详见各个组件)
四、事件的绑定和冒泡
事件绑定的写法同组件的属性，以 key、value 的形式。
l key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。自基础库版本 1.5.0 起，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、、catch:touchstart。
l value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。
l bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。
如在下边这个例子中，点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发handleTap2，点击 outer view 会触发handleTap1。
点击(此处)折叠或打开
- view id="outer" bindtap="handleTap1">
- outer view
- view id="middle" catchtap="handleTap2">
- middle view
- view id="inner" bindtap="handleTap3">
- inner view
- /view>
- /view>
- /view>
五、事件的捕获阶段
自基础库版本 1.5.0 起，触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。
在下面的代码中，点击 inner view 会先后调用handleTap2、handleTap4、handleTap3、handleTap1。
点击(此处)折叠或打开
- view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
- outer view
- view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
- inner view
- /view>
- /view>
如果将上面代码中的第一个capture-bind改为capture-catch，将只触发handleTap2。
点击(此处)折叠或打开
- view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
- outer view
- view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
- inner view
- /view>
- /view>
六、事件绑定实例
1、本实例演示一个树状的结构，当点击某个项目的时候，首先要知道他的父目录id，然后是项目id，这两个id同时决定了跳转的页面
2、wxml文件
点击(此处)折叠或打开
- template name="foldTemplate">
- !--捕获tap，捕获由外到内传递-->
- view class="fold-container" capture-bind:tap='onFoldCapture' data-fold-id="{{foldId}}" >
- !--需要设置自定义数据，将view的序号传入到js文件-->
- view class='fold-head' bindtap='onFoldLaunch' data-current-id="{{foldId}}">
- !--根据isLaunch的值来选择图片-->
- image class="fold-img" src="{{isLaunch===1?'/images/arrow-down.jpg':'/images/arrow-right.jpg'}}">/image>
- text class="fold-text">{{foldName}}/text>
- /view>
- !--根据子元素的个数来利用for循环-->
- block wx:for="{{foldSub}}">
- !--根据isLaunch的值来判断子元素是否要显示-->
- !--需要设置自定义数据，将view的序号传入到js文件-->
- view class='fold-content' wx:if="{{isLaunch}}" bindtap='onSubjectTap' data-subject-id="{{index}}">
- text class='fold-subject'>{{item}}/text>
- /view>
- /block>
- /view>
- /template>
3、js文件
点击(此处)折叠或打开
- Page({
-
- //条目点击事件，根据不同的条目进行页面跳转
- onSubjectTap: function(event){
- var that = this;
- //获取当前子元素的序号
- console.log("subject id: " + event.currentTarget.dataset.subjectId);
- var subjectId = event.currentTarget.dataset.subjectId;
- console.log(that.data.fold[currentFoldId].foldSubUrl[subjectId]);
- //跳转到对应的页面,将当前目录和子项的id传入
- wx.navigateTo({
- url: that.data.fold[currentFoldId].foldSubUrl[subjectId] + "?foldId="+currentFoldId+"&subjectId="+subjectId,
- })
- },
-
- //目录事件捕获，捕获发生在冒泡之前，而且捕获是由外到内的
- onFoldCapture: function(event){
- console.log("fold id : " + event.currentTarget.dataset.foldId);
- //记录当前的目录id
- //在点击目录下面的条目的时候，需要知道当前的条目属于哪个目录的
- currentFoldId = event.currentTarget.dataset.foldId;
- }
-
- })
