事件关键词 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 拿到。 于是,我们对小程序的事件有了初步的了解,但是当我们用的时候就发现还有很多没有注意到的地方。

下面接入正题,探索文章题目的疑问(当然后面还有一些彩蛋)

一、 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

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

觉得对您有帮助的话就点个赞收藏吧!

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

阅读原文