微信小程序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 相关文章推荐
在线编辑器的实现原理(兼容IE和FireFox)
Mar 09 Javascript
理解Javascript_05_原型继承原理
Oct 13 Javascript
jQuery hover 延时器实现代码
Mar 12 Javascript
JS通过相同的name进行表格求和代码
Aug 18 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
Jun 06 Javascript
浅谈javascript 归并方法
Jan 21 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
JQuery的Pager分页器实现代码
May 03 Javascript
Vue实现动态响应数据变化
Apr 28 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 Javascript
JS 实现微信扫一扫功能
Sep 14 Javascript
Vue递归实现树形菜单方法实例
Nov 06 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
简体中文转换为繁体中文的PHP函数
2006/10/09 PHP
PHP获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
apache和PHP如何整合在一起
2015/10/12 PHP
PHP中phar包的使用教程
2017/06/14 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
动态表格Table类的实现
2009/08/26 Javascript
MooTools 1.2中的Drag.Move来实现拖放
2009/09/15 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
基于jQuery实现滚动刷新效果
2017/01/09 Javascript
jQuery使用正则验证15/18身份证的方法示例
2017/04/27 jQuery
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
vue中添加mp3音频文件的方法
2018/03/02 Javascript
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
element-ui如何防止重复提交的方法步骤
2019/12/09 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
2020/03/12 Javascript
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
Pycharm之快速定位到某行快捷键的方法
2019/01/20 Python
浅谈spring boot 集成 log4j 解决与logback冲突的问题
2020/02/20 Python
雅诗兰黛美国官网:Estee Lauder美国
2016/07/21 全球购物
美国汽车交易网站:Edmunds
2016/08/17 全球购物
工程师岗位职责
2013/11/08 职场文书
社区优秀志愿者材料
2014/02/02 职场文书
服装行业创业计划书范文
2014/02/05 职场文书
两只小狮子教学反思
2014/02/05 职场文书
运动会广播稿150字
2014/02/19 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
期中考试复习计划
2015/01/19 职场文书
职代会闭幕词
2015/01/28 职场文书
2015年语文教学工作总结
2015/05/25 职场文书
导游词之西安骊山
2019/12/20 职场文书
MySQL8.0.18配置多主一从
2021/06/21 MySQL