微信小程序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 相关文章推荐
JavaSript中变量的作用域闭包的深入理解
May 12 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
Dec 16 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
深入理解js函数的作用域与this指向
May 28 Javascript
Node.js 文件夹目录结构创建实例代码
Jul 08 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 Javascript
jQuery实现的中英文切换功能示例
Jan 11 jQuery
vueScroll实现移动端下拉刷新、上拉加载
Mar 22 Javascript
layui数据表格重载实现往后台传参
Nov 15 Javascript
基于JS实现快速读取TXT文件
Aug 25 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
微信小程序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
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
jQuery异步加载数据并添加事件示例
2014/08/24 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
JavaScript无缝滚动效果的实例代码
2017/03/27 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
vue高德地图之玩转周边
2017/06/16 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
jquery实现简易验证插件封装
2020/09/13 jQuery
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
Python的迭代器和生成器
2015/07/29 Python
Python中extend和append的区别讲解
2019/01/24 Python
自学python的建议和周期预算
2019/01/30 Python
Python属性和内建属性实例解析
2020/01/14 Python
django自定义非主键自增字段类型详解(auto increment field)
2020/03/30 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
python类共享变量操作
2020/09/03 Python
百思买加拿大:Best Buy Canada
2018/03/20 全球购物
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
建筑工程管理专业自荐信范文
2013/12/28 职场文书
三年级科学教学反思
2014/01/29 职场文书
关于读书的演讲稿
2014/05/07 职场文书
分公司负责人任命书
2014/06/04 职场文书
反四风个人对照检查材料思想汇报
2014/09/25 职场文书
小区的门卫岗位职责
2014/10/01 职场文书
2015年创先争优工作总结
2015/05/23 职场文书
小学英语教学随笔
2015/08/14 职场文书
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
2022/12/24 HTML / CSS