小程序学习---事件

一、什么是事件

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;
    }

})