iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序事件绑定传参冒泡及捕获的示例详解
  • 149
分享到

微信小程序事件绑定传参冒泡及捕获的示例详解

2024-04-02 19:04:59 149人浏览 八月长安
摘要

目录常见的事件有:currentTarget和target的区别事件传递参数touches和changedTouches的区别事件的绑定两种方法事件传参事件的冒泡与事件的捕获小结常见

常见的事件有:

类型触发条件最低版本
touchstart手指触摸动作开始 
touchmove手指触摸后移动 
touchcancel手指触摸动作被打断,如来电提醒,弹窗 
touchend手指触摸动作结束 
tap手指触摸后马上离开 
longpress手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发1.5.0
longtap手指触摸后,超过350ms再离开(推荐使用longpress事件代替) 
transitionend会在 WXSS transition 或 wx.createAnimation 动画结束后触发 
animationstart会在一个 WXSS animation 动画开始时触发 
animationiteration会在一个 WXSS animation 一次迭代结束时触发 
animationend会在一个 WXSS animation 动画完成时触发 
touchforcechange在支持 3D Touch 的 iPhone 设备,重按时会触发 

有两个注意点:

Touchcancle: 在某些特定场景下才会触发(比如来电打断等) 

tap事件和longpress事件通常只会触发其中一个

currentTarget和target的区别

事件传递参数

当视图层发生事件时,某些情况需要事件携带一些参数到执行的函数中, 这个时候就可以通过

data-属性来完成:

1 格式:data-属性的名称

2 获取:e.currentTarget.dataset.属性的名称

touches和changedTouches的区别

事件的绑定两种方法

第一种:bind:事件名 推荐方式,冒号隔开

wxml文件:

<button bind:tap="click1" data-name="{{name}}" data-age="18" id="bt">我是按钮</button>

js文件:

Page({

  
  data: {
    name:"jeff"
  },
  //e为事件对象,事件所有产生的数据都在e中
  click1:function(e){
    console.log("你点击了事件1",e)
  },
  )}

第二种:bind事件名 不隔开

wxml文件:

<view bindtap="click2">我是事件2</view>

js文件:

Page({
  
  //e为事件对象,事件所有产生的数据都在e中
  click2:function(e){
  console.log("你点击了事件2",e)
  },
  )}

事件传参

关键字:setDate

WXML文件:

<button bind:tap='click2'>你当前点击了{{num}}次</button>

js文件

// pages/test/test.js
Page({
  data: {
    num:0,
  },
  click2: function (e) {
    this.setData({
      num:this.data.num+1
    })
    console.log('你点击了按钮2')
  },
  
})

事件的冒泡与事件的捕获

capture-bind:tap="click1"		 # 事件捕获,执行顺序:由外->内
bind:tap="click2"				# 事件冒泡,执行顺序:由内->外
catch: 阻止事件捕获
capture-catch:tap="click3"   # 顺序执行到click3,不包括click3.后面不再继续执行,阻止了

catch阻止捕获

小结

1 响应函数直接写在page对象中就可以了,不需要和Vue一样写在methods里面

2 <view bind:事件名称 = "响应函数的函数名" data-参数名 = "值">

3 获取点击事件传过来的值,在事件对象中。例如:e.currentTarget.dataset中

以上就是微信小程序事件绑定传参冒泡及捕获的示例详解的详细内容,更多关于微信小程序事件绑定传参冒泡及捕获的资料请关注编程网其它相关文章!

--结束END--

本文标题: 微信小程序事件绑定传参冒泡及捕获的示例详解

本文链接: https://www.lsjlt.com/news/146433.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序事件绑定传参冒泡及捕获的示例详解
    目录常见的事件有:currentTarget和target的区别事件传递参数touches和changedTouches的区别事件的绑定两种方法事件传参事件的冒泡与事件的捕获小结常见...
    99+
    2024-04-02
  • 微信小程序事件绑定传参冒泡及捕获的方法
    这篇文章主要介绍“微信小程序事件绑定传参冒泡及捕获的方法”,在日常操作中,相信很多人在微信小程序事件绑定传参冒泡及捕获的方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”微信小程序事件绑定传参冒泡及捕获的方法...
    99+
    2023-06-30
  • 微信小程序中冒泡事件的示例分析
    这篇文章主要介绍微信小程序中冒泡事件的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!在微信小程序的事件分为冒泡事件和非冒泡事件:冒泡事件:当一个组件上的事件被触发后,该事件会...
    99+
    2024-04-02
  • 微信小程序如何获取绑定事件元素的ID
    这篇文章将为大家详细讲解有关微信小程序如何获取绑定事件元素的ID ,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。小程序list数据带值跳转,一般直接通过设置item的id来标识或者通过设置键值data-x...
    99+
    2023-06-26
  • 【微信小程序入门到精通】— 事件绑定的详细解读
    目录 前言一、事件绑定导论二、常用事件三、事件对象属性列表3.1 target 和 currentTarget 的区别3.2 bindtap 的用法 总结 前言 对于目前形式,微信小程序是一个热门,那么我们该如何去学习...
    99+
    2023-08-17
    微信小程序 小程序 javascript
  • 微信小程序实现事件传参与数据同步流程详解
    目录在事件处理函数中为data中的数据赋值事件传参bindinput的语法格式实现文本框和data之间的数据同步在事件处理函数中为data中的数据赋值 通过调用this.setDat...
    99+
    2024-04-02
  • 微信小程序组件事件的示例分析
    这篇文章主要介绍了微信小程序组件事件的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。组件事件事件系统是组件间交互的主要形式。自定义组件可以触发任意的事件,引用组件的页...
    99+
    2023-06-26
  • 微信小程序中实现动态绑定数据及动态事件处理的示例分析
    这篇文章主要为大家展示了“微信小程序中实现动态绑定数据及动态事件处理的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序中实现动态绑定数据及动态事...
    99+
    2024-04-02
  • 微信小程序自定义可搜索的picker组件示例详解
    PC端开发,组件库是有可搜索的select可用 但是在手机端微信小程序开发的时候,使用select就不太合适了,小程序端的选项一般都是是使用picker 但是,问题又来了,微信小程序...
    99+
    2024-04-02
  • 微信小程序使用ECharts的示例详解
    目录安装 ECharts 组件使用 ECharts 组件图表延迟加载echarts-for-weixin 是 ECharts 官方维护的一个开源项目,提供了一个微信小程序组...
    99+
    2024-04-02
  • 微信小程序中事件bindtap bindinput的示例分析
    小编给大家分享一下微信小程序中事件bindtap bindinput的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一、...
    99+
    2024-04-02
  • 微信小程序自定义组件与页面的相互传参
    目录1. 自定义组件官方文档1.1 创建自定义组件1.1.1 声明组件1.1.2 编辑组件1.2 使用自定义组件1.3 页面向自定义组件传递数据(父传子)1.4 组件将事件传给页面(...
    99+
    2024-04-02
  • uniapp中微信小程序与H5相互跳转以及传参详解(webview)
    目录技术栈:前言:一、小程序向H5传递1.小程序端发送数据2.pages.json进行设置3.H5端进行数据接收4.调试方式以及数据查看二、H5向小程序传递1.引入需要的模块2.更改...
    99+
    2024-04-02
  • 微信小程序实现手势解锁的示例详解
    目录一、项目展示二、设置手势、手势解锁三、手势重置一、项目展示 这是一款简单实用的手势解锁工具 手势解锁是当下常用的解锁方式 本实例以工具的形式 可以嵌入到不同的项目之中 二、设置...
    99+
    2024-04-02
  • 微信小程序事件处理和数据绑定的方法是什么
    这篇文章主要介绍“微信小程序事件处理和数据绑定的方法是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“微信小程序事件处理和数据绑定的方法是什么”文章能帮助大家解决问题。WXML(WeiXin Ma...
    99+
    2023-06-19
  • 微信小程序wx.getFuzzyLocation获取经纬度的成功使用示例,以及注意事项
    注意事项: 微信小程序基础库必须在2.25.0及以上才可以用这个接口,并且微信开发者工具也要是最新的 这个定位接口在编译器中报错,只有在真机中好用(偶尔在编译器中也好用),可以使用真机调试进行开发查看效果 上代码。 第一步:先在小程序...
    99+
    2023-09-05
    微信小程序 小程序
  • 微信小程序怎么自定义组件与页面的相互传参
    本篇内容介绍了“微信小程序怎么自定义组件与页面的相互传参”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!1. 自定义组件小程序允许我们使用自定...
    99+
    2023-06-30
  • 微信小程序实现狼人杀小游戏的示例详解
    目录一、项目展示二、首页三、游戏页四、特殊角色五、源码一、项目展示 狼人杀是一款多人参与的,通过语言描述推动、较量口才和分析判断能力的策略类桌面游戏 玩家人数适于4-18人参与 主要...
    99+
    2024-04-02
  • 微信小程序自定义组件Component的代码详解
    目录1- 前言2- 组件文件新建2.1 定义组件2.2 注册组件2.3 使用组件2.4 图参考3- 外部类和样式隔离3.1定义组件3.2 使用组件3.3 图解释4- 组件插槽4.1 ...
    99+
    2023-03-02
    微信小程序自定义组件详解 微信小程序 component 微信小程序自定义组件
  • 微信小程序movable-view的可移动范围示例详解
    目录前言重新认识movable-area和movable-viewmovable-area和movable-view的一方完全包含另一方movable-area与movable-vi...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作