这是微信小程序踩坑系列的第一篇，想要了解更多关于微信小程序开发的那些事，欢迎关注我的《微信小程序》专栏。

前言

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

看着好像摸不着头脑，其实说白了就是视图（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 属于非冒泡事件，如你还不知道冒泡是什么意思的话，那我可以稍微解释一下：
鱼