小程序button点击事件

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。小程序中常用属性和绑定方式如下:

小程序button点击事件

当事件回调触发的时候,会收到一个事件对象 event,它的详细属性如下表所示:

小程序button点击事件

target 是触发该事件的源头组件,而 currentTarget 则是当前事件所绑定的组件。举例如下:

小程序button点击事件

点击内部的按钮时,点击事件以冒泡的方式向外扩散,也会触发外层 view 的 tap 事件处理函数。此时,对于外层的 view 来说:

e.target 指向的是触发事件的源头组件,因此,e.target 是内部的按钮组件

e.currentTarget 指向的是当前正在触发事件的那个组件,因此,e.currentTarget 是当前的 view 组

bindtap 的语法格式

在小程序中,不存在 HTML 中的 onclick 鼠标点击事件,而是通过 tap 事件来响应用户的触摸行为。通过 bindtap,可以为组件绑定 tap 触摸事件,语法如下:

<button type="primary"bindtap="btnTapHandler">按钮</button>

在页面的 .js 文件中定义对应的事件处理函数,事件参数通过形参 event(一般简写成 e) 来接收:

Page({
btnTapHandle(e){//按钮的 tap 事件处理函数
console.log(e)
//事件参数对象e
})

在事件处理函数中为 data 中的数据赋值

通过调用 this.setData(dataObject) 方法,可以给页面 data 中的数据重新赋值,示例如下:

//页面的.js文件
Page({
  data: {
    count: 0
  },
  // 修改 count 的值
  changeCount(){
    this.setDatz({
      count: this.data.count + 1
  })
 }
})

在事件处理函数中为 data 中的数据赋值

通过调用 this.setData(dataObject) 方法,可以给页面 data 中的数据重新赋值,示例如下:

//页面的.js文件
Page({
  data: {
    count: 0
  }.
  //修改count 的值
  changeCount(){
    this.sesfuta({
      count: this.data.count + 1
    })
  }
})

在事件处理函数中为 data 中的数据赋值

通过调用 this.setData(dataObject) 方法,可以给页面 data 中的数据重新赋值,示例如下:

// 页面的.js文件
Page({
  data: {
    count: 0
  },
  //修改count的值
  changeCogpt() {
    this.setData({
      count: this.data.count + 1
    })
  }
})

事件传参

小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数。例如,下面的代码将不能正常工作:

<button type="primary"bindtap='btnHandler(123)'>事件传参</button>

因为小程序会把 bindtap 的属性值,统一当作事件名称来处理,相当于要调用一个名称为 btnHandler(123) 的事件处理函数。

可以为组件提供 data-* 自定义属性传参,其中 * 代表的是参数的名字,示例代码如下:

<button bindtap="btnHandler"data-info="{{2}}">事件传参</button>

最终info 会被解析为参数的名字,数值 2 会被解析为参数的值。

在事件处理函数中,通过 event.target.dataset.参数名 即可获取到具体参数的值,示例代码如下:

btnHandler(event){
  // dataset 是一个对象,包含了所有通过 data-*传递过来的参数项
  console.log(event.target.dataset)
  //通过dataset 可以访问到具体参数的值
  console.log(event.target.dataset.info)
}

bindinput 的语法格式

在小程序中,通过 input 事件来响应文本框的输入事件,通过 bindinput,可以为文本框绑定输入事件:

<input bindinput="inputHandler"><input>

在页面的 .js 文件中定义事件处理函数:

inputHandler(e){
  // e.detail.vaue是变化过后,文本框最新的值
  console.log(e.detail.value)
}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至2705686032@qq.com 举报,一经查实,本站将立刻删除。原文转载: 原文出处:

(0)
尊云-小张的头像尊云-小张
上一篇 2024 年 5 月 2 日 09:54
下一篇 2024 年 5 月 2 日 09:57

相关推荐

  • IP泄露的危害与防范措施(了解IP泄露风险及解决方案)

    IP泄露是指用户的IP地址被他人获取,从而可能引发一系列安全问题。IP地址是互联网上设备的唯一标识,一旦泄露,可能会导致用户信息泄露、网络攻击、网络诈骗等风险。 一、IP泄露的危害 1. 信息泄露:IP地址泄露后,黑客可以通过技术手段获取用户的个人信息,包括姓名、地址、电话号码等。2. 网络攻击:黑客可以通过IP地址对用户进行网络攻击,如DDoS攻击、端口扫…

    5小时前
    100
  • goland社区版和专业版区别(arcgis安装哪个版本比较好)

    作为程序员而言,往往对于学习新的语言都是有抗拒的。如果你用惯了Java,那么你可能不太愿意去学Python,如果你刚学C或者C++可能你也会看不上Java。因为这个原因还会引发很多口水仗,这很正常。我当时写C++的时候也看不上Java,写了Java又不想学Python,现在学会了Python,有时候也会不想看其他语言写的代码。 但是随着我们的成长和实力的提升…

    2024 年 5 月 10 日
    200
  • ZKEYS现在叫什么(zkeys大陆版和国际版区别)

    随着云计算的不断发展,主机管理系统玩家也是一波接一波,市场新陈代谢不断加速,主机系统赛道似乎慢慢被“玩坏了”。据悉,部分系统更新频率逐渐下降,或者直接宣布停更,还有部分系统开始宣布免费。不难看出,有的是为了及时止损,还有的是为了继续生存,那么免费的背后其服务品质还能得到持续的保障吗?主机管理系统行业正在经历前所未有的洗礼。 面对严峻的市场形势,ZKEYS始终…

    2024 年 5 月 4 日
    100
  • java工厂模式应用场景有哪些(java可以用来写工业软件吗)

    工厂模式是软件设计中最常用也最常见的一种模式,这里通过一个例子来说明其功能。 问题背景 用户需求:请提供 1)、图形绘制功能,当前可绘制当前可绘制原型、方形、三角形。未来可能需要支持绘制菱形、梯形等形状。2)、图形可以提供一些其他的方法,比如绘制、染色、描边等 系统设计 依据上面的需求,我们很自然的会想到以下设计点: 定义接口类,该类定义了对用户提供的方法,…

    2024 年 5 月 9 日
    000
  • 路由器网址进不去怎么办

    路由器是现代家庭的必备物品之一。它将互联网信号转换成我们可用的无线网络,并为我们提供快速,可靠的上网体验。但是,有时候您可能会发现,尽管您的路由器已经连接上了,它仍然无法连接到互联网。这种情况可能很让人沮丧,但请不要担心。本文将为您提供可能引起此问题的原因,并为您解决问题提供一些有用的技巧。 第一种可能的原因是网络问题。尝试连接多个不同的网站,以确认您是否无…

    2024 年 4 月 24 日
    100

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

联系我们

400-900-3935

在线咨询: QQ交谈

邮件:cong@zun.com

工作时间:365天无休服务 24小时在线

添加微信