脚本之家

电脑版
提示:原网页已由神马搜索转码, 内容由www.jb51.net提供.
您的位置：首页→ 网络编程→ JavaScript→ javascript技巧→ 微信小程序事件绑定传参冒泡及捕获

微信小程序事件绑定传参冒泡及捕获的示例详解

  更新时间：2022年04月18日 18:07:03  作者：Jeff的技术栈 
这篇文章主要为大家介绍了微信小程序事件绑定传参冒泡及捕获的示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步早日升职加薪

常见的事件有：

类型
触发条件
最低版本
touchstart
手指触摸动作开始
 
touchmove
手指触摸后移动
 
touchcancel
手指触摸动作被打断，如来电提醒，弹窗
 
touchend
手指触摸动作结束
 
tap
手指触摸后马上离开
 
longpress
手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
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文件：

<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.后面不再继续执行，阻止了

catch阻止捕获

小结

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

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

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

以上就是微信小程序事件绑定传参冒泡及捕获的示例详解的详细内容，更多关于微信小程序事件绑定传参冒泡及捕获的资料请关注脚本之家其它相关文章！

相关文章

    • 对layer弹出框中icon数字参数的说明介绍
      今天小编就为大家分享一篇对layer弹出框中icon数字参数的说明介绍，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
      2019-09-09
    • 利用uni-app开发App的超简易教程
      uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web（响应式）、以及各种小程序,下面这篇文章主要给大家介绍了关于如何利用uni-app开发App的相关资料,需要的朋友可以参考下
      2022-11-11
    • javascript下数值型比较难点说明
      下面两个小问题是楼猪在实际项目开发中遇到的，贴上来和大家讨论下。
      2010-06-06
    • Ionic默认的Tabs模板使用实例
      这篇文章主要为大家详细介绍了Ionic默认的Tabs模板使用实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
      2016-08-08
    • js 绑定键盘鼠标事件示例代码
      用jq提交时想同时按回车键可以提交，此时就不要用form,需要的朋友可以参考下
      2014-02-02
    • 开源一个微信小程序仪表盘组件过程解析
      这篇文章主要介绍了开源一个微信小程序仪表盘组件过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
      2019-07-07
    • JavaScript中的this例题实战总结详析
      使用JavaScript开发的时候,很多人多多少少都会被this的指向问题搞蒙圈,下面这篇文章主要给大家介绍了关于JavaScript中this例题实战的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
      2022-06-06
    • ES6 Generator函数的应用实例分析
      这篇文章主要介绍了ES6 Generator函数的应用,结合实例形式分析了ES6 Generator函数异步操作与异常捕获相关使用技巧,需要的朋友可以参考下
      2019-06-06
    • Javascript浅析执行机制的详情
      这篇文章主要介绍了JavaScript执行机制，想要搞懂JavaScript执行机制，便与进程与线程的概念脱不了干系，下面我们就来看看这JavaScript执行机制的具体介绍吧,需要的朋友可以参考一下
      2022-08-08
    • TypeScript联合类型,交叉类型和类型保护
      这篇文章主要介绍了TypeScript联合类型,交叉类型和类型保护，联合类型就是定义一些类型，定义的变量只需要满足任意一种类型即可，交叉类型就是需要满足所有类型，交叉类型使用，更多内容我们来看看下面文章详细内容吧
      2021-12-12

    最新评论