微信小程序> 微信小程序原生组件、事件对象(绑定、冒泡、捕获)

微信小程序原生组件、事件对象(绑定、冒泡、捕获)

浏览量:464 时间: 来源:尧~

一、原生组件

小程序中的部分组件是由客户端创建的原生组件,包含:

①camera—相机
②canvas—画布
③input(仅在focus时表现为原生组件)
④map—地图
⑤textarea—多行输入框
⑥video—视频

二、事件冒泡

view id="parent" bindtap="fj"  view id="child" bindtap="zj"/view/view#parent{  width: 100%;  height: 300rpx;  background: plum;}#child{  width:40%;  height: 150rpx;  background:powderblue;}fj(event){    console.log(event)  },  zj(event) {   console.log(event)  },

小程序

验证(1):点击子级时的效果

小程序
验证后发现事件发生冒泡,点击子级时,除了触发子级事件,还会冒泡到父级,触发父级绑定的事件

验证(2): 点击父级时的效果

小程序
点击父级红色区域时,只会触发父级绑定的事件

target和currentTarget 属性的区别:

event.target返回触发事件的元素
event.currentTarget返回绑定事件的元素
小程序

通俗理解:

currentTarget为当前事件所绑定的组件
target是触发该事件的源头组件

阻止冒泡:

bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡
小程序
使用catch事件绑定后,此时点击子级区域时,便不会再冒泡至父级区域。

三、事件对象

当事件回调触发的时候,逻辑层绑定该事件的处理函数会收到一个事件对象,对象的详细属性如下,
小程序
小程序

详细介绍:

小程序
touches 是一个数组,每个元素为一个 Touch 对象(canvas 触摸事件中携带的 touches 是 CanvasTouch 数组)。 表示当前停留在屏幕上的触摸点。
小程序
小程序
changedTouches 数据格式同 touches。 表示有变化的触摸点,如从无变有(touchstart),位置变化(touchmove),从有变无(touchend、touchcancel)。

小程序
小程序

小程序
小程序

事件对象event之dataset注意项:

在组件节点中可以附加一些自定义数据。这样,在事件中可以获取这些自定义的节点数据,用于事件的逻辑处理。

在 WXML 中,这些自定义数据以 data- 开头,多个单词由连字符 - 连接。这种写法中,连字符写法会转换成驼峰写法,而大写字符会自动转成小写字符。
小程序
小程序

四、事件捕获

事件流包含事件冒泡与捕获,通过bind绑定会发生冒泡,catch则会阻止冒泡传播。

自基础库版本 1.5.0 起,触摸类事件开始支持捕获阶段。

①捕获阶段位于冒泡阶段之前

②绑定语法capture-bind、capture-catch
小程序
此时,再次点击子区域时触发顺序为上图所示, 由此可以验证出捕获优先级高于冒泡。

注意:捕获阶段要求bind和catch后紧跟一个冒号,如bind:tap、catch:touchstart

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎