微信小程序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 相关文章推荐
js css样式操作代码(批量操作)
Oct 09 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
Apr 17 Javascript
jQuery过滤选择器用法分析
Feb 10 Javascript
javascript无刷新评论实现方法
May 13 Javascript
javascript实现在线客服效果
Jul 15 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
Dec 08 Javascript
js 动态生成html 触发事件传参字符转义的实例
Feb 14 Javascript
JS监控关闭浏览器操作的实例详解
Sep 12 Javascript
vue双花括号的使用方法 附练习题
Nov 07 Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 Javascript
React服务端渲染原理解析与实践
Mar 04 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 Directory 函数的详解
2013/03/07 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
javascript 页面只自动刷新一次
2009/07/10 Javascript
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
JavaScript中实现最高效的数组乱序方法
2014/10/11 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
2016/06/24 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
vue element table 表格请求后台排序的方法
2018/09/28 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
p5.js绘制旋转的正方形
2019/10/23 Javascript
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
Python tkinter常用操作代码实例
2020/01/03 Python
python enumerate内置函数用法总结
2020/01/07 Python
浅谈python元素如何去重,去重后如何保持原来元素的顺序不变
2020/02/28 Python
浅谈django不使用restframework自定义接口与使用的区别
2020/07/15 Python
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
什么是数据库锁?Oracle中都有哪些类型的锁?
2015/08/21 面试题
结构工程研究生求职信
2013/10/13 职场文书
工作会议欢迎词
2014/01/16 职场文书
开业庆典主持词
2014/03/21 职场文书
安全责任协议书
2014/04/21 职场文书
活动总结格式范文
2014/04/26 职场文书
观看信仰心得体会
2014/09/04 职场文书
群众路线教育实践活动剖析材料
2014/09/30 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书