开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情最近每天晚上也在上课，只能把前一天晚上的笔记在早上进行整理，昨晚学习了一些小程序当中的事件，主要是js文件中的事件，以及一些特殊的事件，比如互斥事件，普通的事件绑定

什么是事件

我们在写项目的时候，大多数都是在和数据打交道，那很多数据也是通过事件来改变，所以针对事件，我也做了一些解释。让小伙伴们明白事件主要用来做什么。

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

//comm.wxs文件
var foo = "'hello world' from comm.wxs";
var bar = function(d) {
  return d+'哈哈';
}
function bindTap1(){
  console.log('wxs文件点击事件')
}
module.exports = {
  foo: foo,
  bar: bar,
  bindTap1:bindTap1
};

//index.html文件
<view bindtap="{{tools.bindTap1}}">wxs事件绑定</view>

普通事件绑定

普通事件绑定使用bindtap，想要阻止冒泡使用catchtap绑定。

冒2.png

互斥事件绑定

我们平时除了用 bind 和 catch 外，还可以使用 mut-bind 来绑定事件。一个 mut-bind 触发后，如果事件冒泡到其他节点上，其他节点上的 mut-bind 绑定函数不会被触发，但 bind 绑定函数和 catch 绑定函数依旧会被触发。

换而言之，所有 mut-bind 是“互斥”的，只会有其中一个绑定函数被触发。同时，它完全不影响 bind 和 catch 的绑定效果。

互斥1.png

互斥2.png

//这里面的handleTap3和handleTap2事件会触发，因为handleTap3和handleTap1是同一类型事件
//都用mut-bind绑定的
<view id="outer" mut-bind:tap="handleTap1">
  outer view
  <view id="middle" bindtap="handleTap2">
    middle view
    <view id="inner" mut-bind:tap="handleTap3">
      inner view
    </view>
  </view>
</view>

事件的捕获阶段

触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时，可以采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。

//这里先执行2--->4--->3--->1
<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>

数据类型

WXS 语言目前共有以下几种数据类型：

number ：数值
string ：字符串
boolean：布尔值
object：对象
function：函数
array : 数组通过var arr=[1,2,3]方式直接创建数组
date：日期通过getDate()获取当前日期对象
regexp：正则通过getRegExp()获取正则对象

以上针对不同的事件，我也自己简单的写了一下代码，希望对小伙伴们有一些帮助。我写的都是非常简单的例子，希望能对小伙伴们有所帮助。

微信小程序视图层/事件

什么是事件

普通事件绑定

互斥事件绑定

事件的捕获阶段

数据类型