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

常见的事件有：

有两个注意点：

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中

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

微信
小程序
事件

相关文章

• 

  JS两种类型的表单提交方法实例分析

  这篇文章主要介绍了JS两种类型的表单提交方法,结合实例形式分析了2种常用的表单提交验证的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下

  2016-11-11
• 

  SharedWorker 多页面相互通信示例详解

  这篇文章主要为大家介绍了SharedWorker 多页面相互通信示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

  2022-12-12
• 

  JavaScript中V8引擎的垃圾回收机制详解

  V8是Google开发的JavaScript引擎,采用分代垃圾回收机制自动管理内存,包括新生代和老生代,新生代使用Scavenge算法快速回收短生命周期对象,老生代使用标记-清除和标记-整理算法优化长期存活对象的回收,V8通过增量标记、并发GC和增量压缩等优化策略减少垃圾回收对性能的影响

  2025-02-02
• 

  javascript实现获取指定精度的上传文件的大小简单实例

  下面小编就为大家带来一篇javascript实现获取指定精度的上传文件的大小简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

  2016-10-10
• 

  uniapp使用第三方UI库uview-plus的方法

  uview-plus是uni-app全面兼容nvue的uni-app生态框架,全面的组件和便捷的工具会让您信手拈来,下面这篇文章主要给大家介绍了关于uniapp使用第三方UI库uview-plus的方法,需要的朋友可以参考下

  2023-04-04
• 

  JavaScript实例--创建一个欢迎cookie

  这篇文章主要介绍了JavaScript实例--创建一个欢迎cookie，

  2022-01-01
• 

  JavaScript对象合并实现步骤介绍

  这篇文章主要介绍了JavaScript对象合并实现步骤，为什么要合并？这是我在重构代码的时候的一个需求。简单来说，我会有若干个对象需要合并为一个对象。而这些对象为两层，如果直接展开或者赋值会涉及到深拷贝

  2023-01-01
• 

  最简单的JavaScript图片轮播代码(两种方法)

  基于javascript代码实现最简单的图片轮播效果，非常简单，本文通过两种方式给大家介绍最简单的图片轮播，感兴趣的朋友一起学习吧

  2015-12-12
• 

  javascript中的变量作用域以及变量提升详细介绍

  在javascript中， 理解变量的作用域以及变量提升是非常有必要的。这个看起来是否很简单，但其实并不是你想的那样，还要一些重要的细节你需要理解

  2013-10-10
• 

  JavaScript 事件记录使用说明

  JavaScript 事件记录使用说明需要的朋友可以参考下。

  2009-10-10

最新评论