Thinker | Make a Thinker!
2019-03-24 | UNLOCK

事件

前言

开发微信小程序离不开“事件”，对于初学者来说很难理解小程序里的“事件”是什么、怎么用？
先看看看官方文档的解释：

1

看着好像摸不着头脑，其实说白了就是视图（view）与逻辑（js）交互的通信方式，类似于传统网页中的 onclick 事件，了解 vue 的同学也可以认为是监听指令。
一个简单的绑定事件例子如下：

1
<view id="tapTest" data-hi="WeChat" bindtap="tapName">Click me!</view>
1
2
3
4
5
Page({
  tapName(e) {
    console.log(e)
  }
})

乍一看，确实跟 vue 语法有点像，但是有区别，那就是传参方式不一样。所以这里需要注意的是小程序事件传参是通过当前组件上由data-开头的自定义属性组成的集合。比如上面代码定义了一个 hi 属性，tapName 方法拿到的参数 e 展开大致如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
{
  "type": "tap",
  "timeStamp": 895,
  "target": {
    "id": "tapTest",
    "dataset": {
      "hi": "WeChat"
    }
  },
  "currentTarget": {
    "id": "tapTest",
    "dataset": {
      "hi": "WeChat"
    }
  },
  "detail": {
    "x": 53,
    "y": 14
  },
  "touches": [
    {
      "identifier": 0,
      "pageX": 53,
      "pageY": 14,
      "clientX": 53,
      "clientY": 14
    }
  ],
  "changedTouches": [
    {
      "identifier": 0,
      "pageX": 53,
      "pageY": 14,
      "clientX": 53,
      "clientY": 14
    }
  ]
}

我们看到这个 hi 属性在 dataset.target 和 dataset.currentTarget 下，它（参数 e）是一个对象，也就是说绑定的 hi 属性可以通过 e.dataset.target.hi 或者 e.dataset.currentTarget.hi 拿到。
于是，我们对小程序的事件有了初步的了解，但是当我们用的时候就发现还有很多没有注意到的地方。

下面接入正题，探索文章题目的疑问（当然后面还有一些彩蛋）

一、 bind 和 catch 有什么区别

如果学过前端基础的应该都知道 浏览器事件模型，它分为捕获、目标和冒泡三个阶段（如果需要了解具体详情，可自行百度）。
而小程序事件模型没那么复杂，原本只有冒泡阶段，分为冒泡事件（bind）和非冒泡事件（catch）。当然目前也支持捕获阶段，本文暂不做深入讲解，有兴趣可自行查看 官方文档 。
看到这里，你知道了 bind 属于冒泡事件，catch 属于非冒泡事件，如你还不知道冒泡是什么意思的话，那我可以稍微解释一下：
鱼🐠在水里突出的水泡总是从下向上浮动，最后浮出水面。而冒泡就是基于这一原理，在节点树中有父子关系，父标签总是嵌套着子标签。当点击绑定事件的子标签之后，如果父标签也绑定了一个事件，那么冒泡的话也会触发父标签的事件，而非冒泡则不会触发。也就是冒泡与否决定事件是否想外传递，方向是向“外”的（由此也提一下，捕获与冒泡相反，事件传递方向是向“内”的）。
这里看一个例子：

1
2
3
4
5
6
7
<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 view 会先后调用 handleTap3 和 handleTap2 (因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发 handleTap2，点击 outer view 会触发 handleTap1。
好了，到这里我们就知道了 bind 不会阻止冒泡，事件会一直向上冒泡，而 catch 则会阻止冒泡，只会触发点击的节点事件。

巧用 bind 和 catch 绑定事件

  • WXML 代码如果没有很复杂的层层嵌套关系，或者不涉及父子标签都绑定事件的话，我们用 bind 开头的事件即可
  • 如果遇到卡片式列表，里面还有点赞或者评论等按钮的，那么这些子节点的事件要用 catch 开头，否则会同时触发父节点的事件
  • 在一些自定义弹窗中，可以给父容器定义一个隐藏弹窗的事件，而子容器的事件用 bind 开头，可以达到点击子容器对应事件的同时自动触发隐藏弹窗事件

二、 target 和 currentTarget 有什么差异

在前面绑定事件我们提到 hi 属性可以通过 target 和 currentTarget 获得，那是不是随便用它们其中一个就可以了呢？答案显然不是的。
把上面的例子做一个修改：

1
2
3
4
5
6
7
<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" data-hi="middle" catchtap="handleTap2">
    middle view
    <view id="inner" data-hi="inner" bindtap="handleTap3">inner view</view>
  </view>
</view>

上例中，点击 inner view 时，handleTap3 收到的事件对象 target 和 currentTarget 都是 inner，而 handleTap2 收到的事件对象 target 就是 inner，currentTarget 就是 middle。
也就是说，target 里的属性来源于真正点击的那个组件，而 currentTarget 里的属性总是指向触发事件绑定的组件上。
进一步说就是，currentTarget 能拿到触发事件所在组件上绑定的任何data- 开头的属性，而 target 则不一定是，它拿到的只是用户所真正点击的那个组件上的data- 属性。
明白了这一点，你会发现，从我们开发者的角度来说，更多地是拿到 currentTarget 对象，而不是 target 对象。
也就是说，在开发中，我们只要用 currentTarget 这个对象就能够符合我们的开发要求了，没必要用 target 对象，因为一不小心就会拿不到真正想要的参数。
下面这种场景是我们以前经常犯的错误：

1
2
3
4
5
<view id="outer" data-hi="outer" bindtap="handleTap">
  outer view
  ...
  <view id="inner">inner view</view>
</view>

上面代码中，如果我们点击 inner view 这个组件，照样会触发 handleTap 事件，然后我们按照以往习惯地用长度比较短的 target 对象去拿我们绑定的属性，但是你会发现取不到 hi 这个属性！然后你又点了一下 outer view，这时候有见鬼了，又可以拿到 hi 这个属性了！（百思不得其解，看来这个 target 对象不稳定啊，还是用 currentTarget 对象会可靠点）以前的想法就是这样，拿参数只用 currentTarget 对象。但是我们现在知道原理了，用起来就好办很多了。
下面是点击 inner view 得到的参数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
    "type": "tap",
    "timeStamp": 2083,
    "target": {
        "id": "inner",
        "offsetLeft": 140,
        "offsetTop": 459,
        "dataset": {}
    },
    "currentTarget": {
        "id": "outer",
        "offsetLeft": 140,
        "offsetTop": 434,
        "dataset": {
            "hi": "outer"
        }
    },
    ... 省略无关部分 ...
}

下面是点击 outer view 得到的参数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
    "type": "tap",
    "timeStamp": 2083,
    "target": {
        "id": "inner",
        "offsetLeft": 140,
        "offsetTop": 459,
        "dataset": {
            "hi": "outer"
        }
    },
    "currentTarget": {
        "id": "outer",
        "offsetLeft": 140,
        "offsetTop": 434,
        "dataset": {
            "hi": "outer"
        }
    },
    ... 省略无关部分 ...
}

这里结果验证的正是我前面所说的结论，如果还没理解，那就多看几遍吧。

巧用 target 和 currentTarget 对象

  • 一般情况下，建议只使用 currentTarget 对象，因为它能拿到我们想要的参数属性
  • 如果我们需要获取不同子组件绑定的属性，比如点击某个组件拿到该组件上绑定的属性，才用 target 对象
  • 具体应用有待挖掘，回到上面的自定义弹窗，我们点击子容器时可以在隐藏弹窗事件里通过 target 对象拿到子容器上绑定的属性

三、思考（引伸）

1、 data- 开头的属性书写方式需要注意的地方：以data- 开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)如 data-element-type，最终在 event.currentTarget.dataset 中会将连字符转成驼峰 elementType。下面是一个简单的例子：

1
2
3
<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap">
  DataSet Test
</view>
1
2
3
4
5
6
Page({
  bindViewTap(e) {
    console.log(e.currentTarget.dataset.alphaBeta) // 1 (- 会转为驼峰写法)
    console.log(e.currentTarget.dataset.alphabeta) // 2 (大写会转为小写)
  }
})

2、 在前面参数 e 的对象里面的 detail 对象一般是用来取表单数据，比如在 input 组件上的 value 属性，绑定事件里可以通过 detail.value 拿到。（关于 input 组件的详解，敬请期待）

四、参考链接

（完）

微信小程序

评论加载中