事件关键词 bind 和 catch 的区别、事件对象 target 和 currentTarget 的差别

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

---

前言

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

看着好像摸不着头脑，其实说白了就是视图（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 拿到。 因而，咱们对小程序的事件有了初步的了解，可是当咱们用的时候就发现还有不少没有注意到的地方。

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

1、 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 开头，能够达到点击子容器对应事件的同时自动触发隐藏弹窗事件

2、 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 对象拿到子容器上绑定的属性

3、思考（引申）

一、 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 (大写会转为小写)
  }
})
复制代码

二、 在前面参数 e 的对象里面的 detail 对象通常是用来取表单数据，好比在 input 组件上的 value 属性，绑定事件里能够经过 detail.value 拿到。（关于 input 组件的详解，敬请期待）

4、参考连接

• 事件·小程序

（完）

本文做者 Thinker

本文若有错误之处，请留言，我会及时更正

以为对您有帮助的话就点个赞或收藏吧！

欢迎转载或分享，转载时请注明出处

阅读原文