微信标签语言之页面结构文件--事件

1、事件概述   

由于小程序中没有DOM节点概念，所以事件只能通过WXML绑定，不能通过逻辑层动态绑定。事件可以看作是视图层到逻辑层的通讯方式；抑或是将用户的行为反馈到逻辑层进行处理；或是将事件绑定在组件上，当触发事件时，就会执行逻辑层中对应的事件处理函数。

2. 事件分类

   2.1 冒泡事件
         当一个组建上的事件被触发后，该事件向父节点传递。即冒泡事件冒泡的特点是触发从具体的元素逐步向外层扩散。
   2.1.1 WXML冒泡事件
          1）touchstart：手指触摸动作开始
          2）touchmove：手指触摸后移动
          3）touchcancel：手指触摸动作被打断
          4）touchend：手指触摸动作结束
          5）tap：手指触摸后马上离开
          6）longtap：手指触摸后，超过350ms再离开

   2.2 非冒泡事件
         当一个组件上的事件被出发后，该事件不会向父节点传递。
         除了上述列出来的6类冒泡事件，若无特殊声明都是非冒泡事件。

3. 事件绑定

    事件绑定的写法和组件的属性一样，以key、value形式组织。其中，.key：以bind或catch开头，然后跟上事件类型，字母均小写。如bindtap等。.value：事件函数名，对应Page中定义的同名函数。绑定时bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定会阻止冒泡事件向上冒泡。
    事件对象可以携带额外信息，如id、dataset、touches

<view bindtap='tap1'>
  触发1{{tap1}}
  <view bindtap='tap2'>
    触发2{{tap2}}
    <view bindtap='tap3'>
      触发3{{tap3}}
    </view>
  </view>
</view>

/**
   * 自定义函数   当点击tap3时，会向上逐级触发
   */
  tap1:function(){
    this.setData({
      tap1:"111"
    });
  },
  tap2: function () {
    this.setData({
      tap2: "111"
    });
  },
  tap3: function () {
    this.setData({
      tap3: "111"
    });
  }

4. 事件对象

    事件对象属性基本可分为三类：BaseEvent（基础事件对象属性）、CustomEvent（自定义事件对象属性）、TouchEvent（触摸事件对象属性）

    一般而言，当组件触发事件时，逻辑层绑定该事件的事件处理函数会收到一个事件对象。现在获取BaseEvent该事件对象：

以下是对上述属性的注解：
1）type：事件类型，本例中事件为手指触摸后马上来开
2）timeStamp：事件生成时的时间戳，页面打开到触发所经过的毫秒数
3）target：触发事件源组件（即冒泡开始的组件）的相关属性集合
4）dataset：当前组件上由data-开头的自定义属性组成的集合
5）CustomEvent为自定义事件对象，只有一个属性：detail（额外信息，通常传递组件特殊信息）
6）touches：触摸事件对象属性，当前停留在屏幕中的触摸点信息的数组