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

[复制链接]
查看: 1303|回复: 7
  • 萌哒
    2018-11-19 14:03
  • 发表于 2019-1-23 14:20:35 | 显示全部楼层 |阅读模式

    马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

    您需要 登录 才可以下载或查看,没有帐号?立即注册

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

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

    看着好像摸不着头脑,其实说白了就是视图(view)与逻辑(js)交互的通信方式,类似于传统网页中的 onclick 事件,了解 vue 的同学也可以认为是监听指令。
    一个简单的绑定事件例子如下:

    <span class="hljs-tag"style="box-sizing: border-box; color: rgb(0, 0, 128);">Click me!</span class="hljs-name"style="box-sizing: border-box;"view/span>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 属于非冒泡事件,如你还不知道冒泡是什么意思的话,那我可以稍微解释一下:
    发表于 2019-1-24 13:38:36 | 显示全部楼层
    确实是难得好帖啊,顶先
    回复

    使用道具 举报

    发表于 2019-1-24 13:38:39 | 显示全部楼层
    回的人少,我来小顶一下
    回复

    使用道具 举报

    1gk

    发表于 2019-1-25 09:54:16 | 显示全部楼层
    额,看不懂在说神马~@_@
    回复

    使用道具 举报

    发表于 2019-1-26 12:33:49 | 显示全部楼层
    啥也不说了,感谢楼主分享哇!
    回复

    使用道具 举报

    发表于 2019-1-30 17:29:08 | 显示全部楼层
    珍惜生命,果断回帖。
    回复

    使用道具 举报

    发表于 2019-2-3 12:49:28 | 显示全部楼层
    正需要,支持楼主大人了!
    回复

    使用道具 举报

    发表于 4 天前 | 显示全部楼层
    么有分,谁能送我点积分啊::>_<::
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

     
     
    技术支持
    在线客服
    售后交流群瑞恩社区™售后</font><br><span>交流
    工作时间:
    8:00-18:00
    客服热线:
    15368564009
    微信扫一扫
    返回顶部 关注微信 下载APP 返回列表