小程序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

相关推荐

发表回复

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

联系我们

400-900-3935

在线咨询: QQ交谈

邮件:cong@zun.com

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

添加微信