这是微信小程序踩坑系列的第一篇，想要了解更多关于微信小程序开发的那些事，欢迎关注我的《微信小程序》专栏。
前言
开发微信小程序离不开“事件”，对于初学者来说很难理解小程序里的“事件”是什么、怎么用？
先看看看官方文档的解释：
看着好像摸不着头脑，其实说白了就是视图（view）与逻辑（js）交互的通信方式，类似于传统网页中的 onclick 事件，了解 vue 的同学也可以认为是监听指令。
一个简单的绑定事件例子如下：
<view id="tapTest" data-hi="WeChat" bindtap="tapName">Click me!</view>
Page({
tapName(e) {
console.log(e)
}
})
乍一看，确实跟 vue 语法有点像，但是有区别，那就是传参方式不一样。所以这里需要注意的是小程序事件传参是通过当前组件上由data-开头的自定义属性组成的集合。比如上面代码定义了一个 hi 属性，tapName 方法拿到的参数 e 展开大致如下：
{
"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 属于非冒泡事件，如你还不知道冒泡是什么意思的话，那我可以稍微解释一下：
鱼🐠在水里突出的水泡总是从下向上浮动，最后浮出水面。而冒泡就是基于这一原理，在节点树中有父子关系，父标签总是嵌套着子标签。当点击绑定事件的子标签之后，如果父标签也绑定了一个事件，那么冒泡的话也会触发父标签的事件，而非冒泡则不会触发。也就是冒泡与否决定事件是否想外传递，方向是向“外”的（由此也提一下，捕获与冒泡相反，事件传递方向是向“内”的）。
这里看一个例子：
<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 获得，那是不是随便用它们其中一个就可以了呢？答案显然不是的。
把上面的例子做一个修改：
<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 对象，因为一不小心就会拿不到真正想要的参数。
下面这种场景是我们以前经常犯的错误：
<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 得到的参数：
{
"type": "tap",
"timeStamp": 2083,
"target": {
"id": "inner",
"offsetLeft": 140,
"offsetTop": 459,
"dataset": {}
},
"currentTarget": {
"id": "outer",
"offsetLeft": 140,
"offsetTop": 434,
"dataset": {
"hi": "outer"
}
},
... 省略无关部分 ...
}
下面是点击 outer view 得到的参数：
{
"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。下面是一个简单的例子：
<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap">
DataSet Test
</view>
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 组件的详解，敬请期待）
四、参考链接
（完）
本文作者 Thinker
本文如有错误之处，请留言，我会及时更正
觉得对您有帮助的话就点个赞或收藏吧！
欢迎转载或分享，转载时请注明出处
