用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 资讯/观点 查看内容

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

Rolan 2019-1-21 00:23

这是微信小程序踩坑系列的第一篇,想要了解更多关于微信小程序开发的那些事,欢迎关注我的《微信小程序》专栏。前言开发微信小程序离不开“事件”,对于初学者来说很难理解小程序里的“事件”是什么、怎么用?先看看 ...

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


前言

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

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

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: Thinker 来自: segmentfault