微信小程序学习笔记 (小程序页面学习 十 WXML-事件 基本食用方法)

视图层

  框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。
  将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。
  WXML(WeiXin Markup language) 用于描述页面的结构。
  WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
  WXSS(WeiXin Style Sheet) 用于描述页面的样式。
  组件(Component)是视图的基本组成单元。

事件

介绍

什么是事件
1. 事件是视图层到逻辑层的通讯方式。
2. 事件可以将用户的行为反馈到逻辑层进行处理。
3. 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
4. 事件对象可以携带额外信息，如 id, dataset, touches。
以上就是事件的解释, 这个算是概念吧,我也没办法再用语言去解释精简的语言了.

事件分类

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

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

使用方式

  我们在前面多次使用了事件,其中有点击事件, 对话框失焦事件但是我们并没有对它们进行详细的解释
  接下来我们演示如何绑定一个事件, 首先需要在对应的wxml中做出声明
index.wxml

<view>
    <text>绑定事件</text>
    <button bindtap='firstClickEvent'>点一下</button>
</view>

  之后再对应的js文件中写相对应的函数

firstClickEvent : function(){
    console.log("按钮被点击了");
}

  那么这个点击事件就完成了,但是事件函数是可以传参的让我们试下
index.js

firstClickEvent : function(e){
    console.log("firstClickEvent");
    console.log(e)
}

运行效果

我们发现这个传来的参数共有以下几个属性
type, timeStamp target currentTarget detail changedTouches touches
我们先看看微信小程序中的事件属性

• BaseEvent 基本事件对象属性表

属性	类型	说明
type	String	代表事件的类型
timeStamp	Integer	页面打开到触发事件所经过的毫秒数。
target	Object	触发事件的组件的一些属性值集合
currentTarget	Object	当前组件的一些属性值集合

• CustomEvent 自定义事件对象属性列表 (继承 BaseEven)

属性	类型	说明
detail	Object	额外的信息

• TouchEvent 触摸事件对象属性列表 (继承 BaseEvent)

属性	类型	说明
touches	Array	触摸事件,当前停留在屏幕中的触摸点信息的数组
changedTouches	Array	触摸事件,当前变化的触摸点信息的数组

让我们先对上面的各个属性进行解释
特殊事件： 中的触摸事件不可冒泡，所以没有 currentTarget。

部分属性的详解

type

代表事件的类型,详见下表

类型	触发条件	最低版本
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

以上就是除自定义事件外的事件
  注 除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如<form/>的submit事件，<input/>的input事件，<scroll-view/>的scroll事件

target currentTarget

他们两个属性几乎一致,所以放在一起说明

属性	类型	说明
id	String	组件id
tagName	String	组件类型
dataset	Object	事件源组件上由data-开头的自定义属性组成的集合

关于dataset的详解
dataset
  在组件中可以定义数据，这些数据将会通过事件传递给 SERVICE。 书写方式： 以data-开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)如data-element-type，最终在 event.currentTarget.dataset 以及event.target.dataset 中将连字符转成驼峰elementType,data会被去掉,如下图所示

  在这里说明currentTarget target的区别, target 是触发事件的源组件, 即冒泡事件的起始组件, currentTarget 即为触发当前事件的组件,给出测试代码
index.wxml

<view id='c'  bindtap='thirdClickEvent' >
    <text>绑定事件</text>
    <view id='b'  bindtap='secondClickEvent' >
        <button id='a' bindtap='firstClickEvent'>点一下</button>
    </view>
</view>

index.js

firstClickEvent : function(e){
    console.log("firstClickEvent");
    console.log(e)
  },
  secondClickEvent: function (e) {
    console.log("secondClickEvent");
    console.log(e)
  },
  thirdClickEvent: function (e) {
    console.log("thirdClickEvent");
    console.log(e)
  },

建议复制代码自行运行下,再看解释

附上一个我个人理解的一个图 画的不好多多担待

现在以A,B,C 来命名这三个组件和他们的id 对应 如按钮A
对于冒泡事件来说, 当我点击 这个按钮A时,会发生以下事情
  首先 按钮A会捕获这个事件, 因为它使用了 bindtap 来绑定点击事件, 而他的firstClickEvent 参数的 target 和 currentTarget 属性都是 按钮A的信息
  之后 viewB 也会捕获这个事件, 而他的 secondClickEvent 参数的 target 是 a按钮A, 但currentTarget 是他自身viewB
  最后 viewC 也会捕获这个事件, 而他的 thirdClickEvent 参数的 target 是 a按钮A, currentTarget 则是他自身viewC
  我们可以看下 BaseEvent 中的属性介绍, 因为这时 按钮A 即是捕捉事件的组件,也是发出事件的组件, 所以target 一定是 A, 而currentTarget 就是谁调用了了这个函数那么他就是谁, 若是不清楚的话呢举个栗子:
有一个气球, 绳子很短, A在一楼 , b 在 二楼 , c 在三楼
若A放飞了气球 那么
   首先是A看到了气球, 这时 是A放的气球 ,A看到了放飞的气球,    气球飞到二楼后 B看到了气球, 这时 是A放的气球, B看到飞的气球
   气球飞到三楼,C看到了气球, 这时 是A放的气球, C看到飞的气球
在这个过程中我们发现 不管谁看到气球, 气球肯定是A放的没错, 这时A其实就是 target(一切的起始), 看到气球的 A,B,C 就是currentTarget(触发事件的组件)
这时我们也对冒泡事件有了一点的了解了,我给个运行图

至于非冒泡事件就是指,仅仅会在自身上响应,不往父容器传递

bind vs catch

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

这个是官网给的解释我们大概会明白一点接下来给出图解,作对比

图中我们发现view左边是一个bindtap 右边是catchtap , 左边的tip事件从button A 冒泡到了view B 之后又冒泡到了 view C, 但是右边的就不一样了, tip事件从button A 冒泡到了view B 在向往上冒泡的时候被拦截了, 在这里catch其实就是捕获的意思, 假如说用我们上面举的栗子, 原本B只是看到了气球, 那么现在 B就是在看到了气球的同时把气球抓住了,不让气球往上飞, 那么view C自然也看不到了
给个运行效果

以上基本就是常用的属性剩余的也就不说了, 若是有用到会做补充,暂时给上官网说明

待补录

touchs

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

属性	类型	说明
identifier	Number	触摸点的标识符
pageX, pageY	Number	距离文档左上角的距离，文档的左上角为原点 ，横向为X轴，纵向为Y轴
clientX, clientY	Number	距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴

CanvasTouch

属性	类型	说明
identifier	Number	触摸点的标识符
x, y	Number	距离 Canvas 左上角的距离，Canvas 的左上角为原点 ，横向为X轴，纵向为Y轴

changedTouches

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

detail

自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息，详见组件定义中各个事件的定义。
点击事件的detail 带有的 x, y 同 pageX, pageY 代表距离文档左上角的距离。

小程序代码片段 wechatide://minicode/CfSSkQme63Zo