WXML模板语法-事件绑定

news2024/12/23 17:21:57

一、

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>

info会被解析为参数的名字，数值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)
  }


})