微信小程序APP的事件绑定以及传递参数时的冒泡和捕获


Posted in Javascript onApril 19, 2022

常见的事件有:

类型 触发条件 最低版本
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的区别

微信小程序APP的事件绑定以及传递参数时的冒泡和捕获

事件传递参数

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

data-属性来完成:

1 格式:data-属性的名称

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

微信小程序APP的事件绑定以及传递参数时的冒泡和捕获

touches和changedTouches的区别

微信小程序APP的事件绑定以及传递参数时的冒泡和捕获

事件的绑定两种方法

第一种: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.后面不再继续执行,阻止了

微信小程序APP的事件绑定以及传递参数时的冒泡和捕获

微信小程序APP的事件绑定以及传递参数时的冒泡和捕获

catch阻止捕获

微信小程序APP的事件绑定以及传递参数时的冒泡和捕获

小结

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

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

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

以上就是微信小程序事件绑定传参冒泡及捕获的示例详解的详细内容!

Javascript 相关文章推荐
通过Javascript将数据导出到外部Excel文档的函数代码
Jun 15 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
javascript中Object使用详解
Jan 26 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
May 17 Javascript
jQuery弹出层插件popShow用法示例
Jan 23 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
js每隔两秒输出数组中的一项(实例)
May 28 Javascript
js实现随机数字字母验证码
Jun 19 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
Jul 31 Javascript
详解vue更改头像功能实现
Apr 28 Javascript
layui表格设计以及数据初始化详解
Oct 26 Javascript
微信小程序APP的生命周期及页面的生命周期
解决vue中provide inject的响应式监听
Apr 19 #Vue.js
vue3种table表格选项个数的控制方法
Apr 14 #Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 #Vue.js
解决vue-router的beforeRouteUpdate不能触发
Apr 14 #Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 #Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 #Vue.js
You might like
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
php中文验证码实现示例分享
2014/01/12 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
js chrome浏览器判断代码
2010/03/28 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
原生js模拟淘宝购物车项目实战
2015/11/18 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
简单实现js菜单栏切换效果
2017/03/04 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
JS实现带动画的回到顶部效果
2017/12/28 Javascript
angularJs中json数据转换与本地存储的实例
2018/10/08 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
python中学习K-Means和图片压缩
2017/11/20 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
python正则-re的用法详解
2019/07/28 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
python自动生成model文件过程详解
2019/11/02 Python
Python-numpy实现灰度图像的分块和合并方式
2020/01/09 Python
自定义html标记替换html5新增元素
2008/10/17 HTML / CSS
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
英国在线花园中心:You Garden
2018/06/03 全球购物
生物技术专业毕业生求职信范文
2013/12/14 职场文书
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
大学班干部竞选稿
2015/11/20 职场文书
《卖火柴的小女孩》教学反思
2016/02/19 职场文书
Java并发编程之Executor接口的使用
2021/06/21 Java/Android
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL