温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

微信小程序事件绑定传参冒泡及捕获的方法

发布时间:2022-04-19 09:10:49 来源:亿速云 阅读:486 作者:iii 栏目:开发技术

这篇文章主要介绍“微信小程序事件绑定传参冒泡及捕获的方法”,在日常操作中,相信很多人在微信小程序事件绑定传参冒泡及捕获的方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”微信小程序事件绑定传参冒泡及捕获的方法”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

    常见的事件有:

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

    微信小程序事件绑定传参冒泡及捕获的方法

    事件传递参数

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

    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阻止捕获

    微信小程序事件绑定传参冒泡及捕获的方法

    到此,关于“微信小程序事件绑定传参冒泡及捕获的方法”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI