WXML模板语法-事件绑定-阿里云开发者社区

WXML模板语法-事件绑定

2024-05-27 17

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 这篇文章主要介绍了微信小程序中的事件处理机制。事件是渲染层与逻辑层通信的方式，允许开发者响应用户行为。常见的事件有`bindtap`，用于处理点击事件。事件处理函数中，可以通过`event`对象获取相关属性，如`target`（触发事件的源头组件）和`currentTarget`（事件绑定的组件）。事件参数传递可通过`data-*`属性实现，然后在事件处理函数中通过`event.target.dataset`访问。此外，`bindinput`用于监听输入框变化，配合`detail.value`可以获取最新的输入值，并实现数据同步。

一、

1.事件

事件是渲染层到逻辑层的通讯方式，通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理

2.小程序中常用的事件

3.事件对象的属性列表

当事件回调触发的时候，会收到一个事件对象event，其属性为：

二、

1.target和currentTarget

target是触发该事件的源头组件，而currentTarget是当前事件所绑定的组件

例如：

点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层view的tap事件处理函数

此时，对于外层的view来说：

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

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

2.bindtap

在小程序中，不存在HTML中的onclick鼠标点击事件，而是通过tap事件来响应用户的触摸行为

（1）通过bindtap，可以为组件绑定tap触摸事件

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

（2）在页面的.js文件中定义对应的事件处理函数，事件参数通过形参event（一般写为e）来接收

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

三、

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

通过调用this.setData(data Object)方法，可以给页面data中的数据重新赋值

<!--pages/list/list.wxml-->
<button type="primary" bindtap="CountChange">+1</button>

// pages/list/list.js
Page({
  data: {
    count:0
  },
 
  //修改count的值
  CountChange(){
    this.setData({
      count:this.data.count + 1
    })
  }
 
})

每按一次+1，控制台的count都会加一

2.事件传参

小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数

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

以上代码不能正常运行

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

可以为组件提供data-*自定义属性传参，其中*代表的是参数的名字

<!--pages/list/list.wxml-->
<button type="primary" data-info="{{2}}">事件传参</button>

nfo会被解析为参数的名字，数值2被解析为参数的值

在事件处理函数中，通过event.target.dataset.函数名即可获取到具体参数的值

<!--pages/list/list.wxml-->
<button type="primary" bindTap="btnTap" data-info="{{2}}">+2</button>

// pages/list/list.js
Page({
  data: {
    count:0
  },
 
  btnTap(e) {
    this.setData({
      count:this.data.count + e.target.dataset.info
    })
  }
 
 
})

如果明确知道自己传的是一个数字的话，建议大家放在Mustache语法里面

3.bindinput的语法格式

在小程序中，通过input事件来响应文本框的输入事件

（1）通过bindinput，可以为文本框绑定输入事件

<!--pages/list/list.wxml-->
<input bindinput="inputHandler"></input>

// pages/list/list.js
Page({
  data: {
    count:0
  },
 
  inputHandler(e){
    //e.detail.value是变化过后，文本框最新的值
    console.log(e.detail.value)
  }
 
 
})