微信小程序-----事件-CSDN博客

一：事件

1.视图（WXML）到逻辑层（JS）的体现 2.事件一旦触发则直接调用逻辑层中的函数（即pages页面中的index.js）

    clickMe: function (event) {
        this.setData({motto:"hello cx"})
        console.log(event);
    }
复制代码

二：事件的使用方式

在组件中绑定事件函数
在page页中的逻辑层写上需要执行的函数【参数：event】

>  显示层：pages/index.wxml
      <view>
        <button bindtouchend="clickMe">点击我</button>
      </view>
      
>  逻辑层：pages/index.js
      clickMe: function (event) {
        this.setData({motto:"hello cx"})
        console.log(event);
      }

复制代码

三：事件详解

1.事件分类

两种：冒泡事件【向父节点传递】和非冒泡事件【不向父节点传递】
WXML的冒泡事件列表：【下面的wxss即css样式表】

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 动画完成时触发

注：除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件【除后四个外其他都是触摸类事件】

2.事件绑定和冒泡

事件绑定的写法同组件的属性，以 key、value 的形式。
key：对于事件的绑定bind/catch | bind:/catch:
value:也就是pages页面中对应的函数名称
书写格式 1.bindtouchend="clickMe" 2.bind:touchend="clickMe"

注意：bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

    <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.点击inner view会执行handleTap3，handleTap2；然后停止冒泡【middle view：使用的是catchtap】
    2.点击middle view只会触发handleTap2
    3.点击outer view只会触发handleTap1【冒泡行为只是向上冒泡】
    【冒泡事件即是在各个组件之间的包裹行为】
复制代码

3.事件的捕获阶段【仅对触摸类事件】

事件先捕获后冒泡【一定是捕获在先】
捕获顺序与冒泡顺序相反【捕获：向下；冒泡：向上】

捕获阶段的事件监听：capture-bind/capture-catch【中断捕获/阻止冒泡】

显示层：pages/index.wxml

    <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> 
复制代码

**描述：执行顺序先执行捕获（向下）然后执行冒泡（向上）；handleTap2/handleTap4/handleTap3/handleTap1**
复制代码

    <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>
复制代码

**描述：handleTap2**
复制代码

4.事件对象

timeStamp：页面打开到触发事件所经过的毫秒数。
target：触发事件的源组件【点击哪个事件发生的捕捉/冒泡】。
currentTarget：事件绑定的当前组件【当前函数所在的组件】。

> target/currentTarget实例
> <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> 
复制代码

逻辑层：
  handleTap2: function (event) {
        console.log('handleTap2：触发了我', '触发事件源' + event.target.id, '事件绑定的当前组件' + event.currentTarget.id);
  } 
复制代码

dataset:组件时可以定义数据的，通过事件传输

书写格式：【切记：函数要写上事件对象event】

<view 
    data-alpha-beta="1" 
    data-alphaBeta="2"
    bindtap="bindViewTap"
> 
       DataSet Test 
</view>
复制代码

1.写在组件的行内：data-nihao-tt 输出：写成驼峰形式event.currentTarget.dataset + nihaoTt

console.log(event.currentTarget.dataset.alphaBeta === '1','转为驼峰写');
返回值：true "转为驼峰写"
复制代码

2.写在组件的行内：data-nihaoTt 输出：将大写转成小写event.currentTarget.dataset + nihaott

console.log(event.currentTarget.dataset.alphabeta === '2','大写会转为小写');
返回值：true " 大写会转为小写"
复制代码

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

touch对象属性：
    identifier(触摸点标识符)
    clientX（距离页面左面的距离）
    clientY（除去导航条部分）
    pageX(同clientX)
    pageY（距离页面顶部的距离）
复制代码

detail:自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息.

    显示层：
   <form bindsubmit="formSubmit" bindreset="formReset">
    <view class="section section_gap">
      <view class="section__title">switch</view>
      <switch name="switch"/>
    </view>
    <view class="section section_gap">
      <view class="section__title">slider</view>
      <slider name="slider" show-value ></slider>
    </view>
  </form>
复制代码

逻辑层：
  formSubmit: function (e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
  },
  
  返回值：form发生了submit事件，携带数据为： {switch: true, slider: 29}
  
  formReset: function () {
    console.log('form发生了reset事件')
  }
复制代码