微信小程序 【笔记003】小程序的事件处理_detail object

前言：

事件，作为小程序里面非常重要的一个功能必须仔细掌握。在微信官方文档里面已经对事件的说明详细，包括，如何表达，如何使用，3C的介绍也非常详细，但是，排版理解稍有不妥，而且，也是没有结合WEUI的设计实例，所以，结合实例做了一些笔记如此文。

---

1 什么是事件

• 事件是视图层到逻辑层的通讯方式。
• 事件可以将用户的行为反馈到逻辑层进行处理。
• 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
• 事件对象可以携带额外信息，如 id, dataset, touches。

---

2 事件分类

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

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

2.1 冒泡事件：

WXML的冒泡事件列表：

2.2 非冒泡事件

除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如<form/>的submit事件，<input/>的input事件，<scroll-view/>的scroll事件，(详见各个组件)

【案】非冒泡事件大多数是自定义的事件。

参考：监听事件

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html?search-key=%E4%BA%8B%E4%BB%B6

上图显示，一个自定义事件的详细情况。其中先在组件的页面里面，设置对组件事件的绑定，其中，

bind:myevent,

bindmyevent

bindmyevent = bind:myevent, bind表示事件绑定的关键字，而 myevent才是事件的名称。

然后应该是在js，文件里面对事件处理函数进行了设计。

---

3 事件绑定和冒泡

3.1 事件绑定

事件绑定的写法同组件的属性，以 key、value 的形式。

【案】所谓key、value形式，其实就是指key（关键字：bind 、catch）+值（名称）的表示方式。

• key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。自基础库版本 1.5.0 起，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、、catch:touchstart。
• value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。

举例：bindtap

3.1.1 当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数

3.1.2 在相应的Page定义中写上相应的事件处理函数

Page({
  tapName: function(event) {
    console.log(event)
  }
})

【案】实例：

 WEUI里面的例子：

<view id="{{item.id}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="kindToggle">

现在我们回到刚才的那个语句，因为后面还有一个部分没有讲解，bindtap="kindToggle

bindtap 是小程序的一个事件绑定，其中,bind表示绑定，tap表示

kindToggle 是事件处理函数，

---

3.2 事件冒泡

【案】所谓冒泡，就是指上层的组件对当前组件事件的反应。微信安排了两个事件关键字来区别不同的冒泡应用。

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>

【案】上面的例子，很形象表达了bind 和 catch绑定的事件的不同。

---

4 事件对象：

微信说明里面对事件对象的定义，只是举例处理几个list，表格，所以，很容易对事件对象是什么，怎么用，为啥要事件对象产生疑惑。 

因为前面我们看到的事件不过是绑定关键字+事件名称，那么如何理解事件对象呢？

如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。 

上文是标准解释，其实很好理解，就是微信里面事件就是一个事件的绑定对象，所以，具备一个对象应有的功能。从一开始的事件定义我们就知道了，其实，事件只有为接受的对象的服务时候，才能绑定组件的同时也携带参数，我们可以理解为一个事件的具备一组属性、行为，那么不就是事件的对象了吗？

后面，我们再讨论一下，对事件对象希望达成透彻理解。

4.1 基础事件对象：

作为事件对象，微信手册里面首先提到的是基础事件，我们看到，这个基础事件的属性列表。

type，事件类型，我们之前的列表已经说明了，有冒泡和非冒泡，其中，冒泡是微信已经定义好的一组列表

timestamp,表示事件的事件戳，这个很好理解

---

关键是target、currentTarget这两个如何理解？

对此，微信有一段描述解释，

 target 和 currentTarget 可以参考上例中，点击 inner view 时，handleTap3 收到的事件对象 target 和 currentTarget 都是 inner，而 handleTap2 收到的事件对象 target 就是 inner，currentTarget 就是 middle。

 

<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>

 我理解为，文中由于冒泡的原因，inner、middle、outer作为事件的触发对象，分别有不同的反馈表现。有的反馈行为是自己本身绑定的事件引起的，这时候就叫currentTarget，否则，就是Target。

target

触发事件的源组件。

currentTarget

事件绑定的当前组件。

其中，在里面有dataset的概念：

---

dataset

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

示例：

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

Page({
  bindViewTap:function(event){
    event.target.dataset.alphaBeta === 1 // - 会转为驼峰写法
    event.target.dataset.alphabeta === 2 // 大写会转为小写
  }
})

上例中，在组件view,中定义了个数据，data-alpha-beta，

然后，定义了一个事件函数，bindviewtap,绑定在tap上，每次点击，会把数据集dataset里面的值进行赋值，也就是传给逻辑层。

---

4.2  自定义事件对象

所谓，自定义事件对象是继承BaseEvent

CustomEvent 自定义事件对象属性列表（继承 BaseEvent）：

 其中，

detail

自定义事件所携带的数据，如表单组件的提交事件会携带用户的输入，媒体的错误事件会携带错误信息，详见组件定义中各个事件的定义。

点击事件的detail 带有的 x, y 同 pageX, pageY 代表距离文档左上角的距离。

---

4.3 TouchEvent 触摸事件对象属性列表（继承 BaseEvent）：

 其中，

touches

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

Touch 对象

CanvasTouch 对象

---

 

changedTouches

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

---

参考：

微信小程序 事件

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html?search-key=%E4%BA%8B%E4%BB%B6

https://www.w3cschool.cn/weixinapp/weixinapp-event.html

JavaScript事件类型

https://www.cnblogs.com/zhuzhenwei918/p/6142228.html

实例：

 

 

---

文章欢迎转载，但务必请给出出处。