导航：首页 > 开发技术 >

微信小程序事件绑定传参冒泡及捕获的方法

发表于：2025-01-21 作者：千家信息网编辑

千家信息网最后更新 2025年01月21日，这篇文章主要介绍"微信小程序事件绑定传参冒泡及捕获的方法"，在日常操作中，相信很多人在微信小程序事件绑定传参冒泡及捕获的方法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答

千家信息网最后更新 2025年01月21日微信小程序事件绑定传参冒泡及捕获的方法

这篇文章主要介绍"微信小程序事件绑定传参冒泡及捕获的方法"，在日常操作中，相信很多人在微信小程序事件绑定传参冒泡及捕获的方法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"微信小程序事件绑定传参冒泡及捕获的方法"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

常见的事件有：

类型	触发条件	最低版本
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文件：

js文件：

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

第二种：bind事件名不隔开

wxml文件:

我是事件2

js文件：

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

事件传参

关键字：setDate

WXML文件：

js文件

// pages/test/test.jsPage({  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阻止捕获

到此，关于"微信小程序事件绑定传参冒泡及捕获的方法"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！

很赞哦！