WXML模板语法-事件绑定

简介: 这篇文章主要介绍了微信小程序中的事件处理机制。事件是渲染层与逻辑层通信的方式,允许开发者响应用户行为。常见的事件有`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)
  }
 
 
})




4.实现文本框和data之间的数据同步


实现步骤:


(1)定义数据



(2)渲染结构



(3)美化样式



(4)绑定input事件处理函数



目录
相关文章
|
1月前
|
小程序 JavaScript
【微信小程序】-- WXML 模板语法 - 事件绑定 -- tap & input (十)
【微信小程序】-- WXML 模板语法 - 事件绑定 -- tap & input (十)
|
7月前
|
JavaScript 前端开发 开发者
Vue.js模板语法[下](事件处理,表单综合案例,自定义组件)---详细讲解
Vue.js模板语法[下](事件处理,表单综合案例,自定义组件)---详细讲解
44 0
|
21天前
|
JavaScript 小程序
WXML模板语法-数据绑定
本文介绍了数据绑定的基本原则和在微信小程序中的应用。主要包括:1) 在页面的.js文件中定义数据;2) 使用Mustache语法(双大括号)在.WXML中绑定数据,用于内容和属性的动态渲染;3) 数据绑定的应用场景,如绑定内容、属性以及进行三元运算和算术运算。通过调试器可以查看页面中的所有数据。
27 0
|
14天前
|
JavaScript
Vue模板语法、属性绑定、条件渲染的学习
Vue模板语法强调插值表达式需返回结果以显示。避免问题的方法是将逻辑处理放在JS中,不在模板内实现。Vue属性绑定使用`v-bind`(可简写为:)动态绑定类或ID,当值为null或undefined时自动移除。支持布尔类型和动态绑定多值。条件渲染包括`v-if`、`v-else`、`v-else-if`和`v-show`,其中`v-if`用于真值时渲染,`v-show`按条件显示,两者的区别在于频繁切换场景和渲染方式。
|
21天前
|
小程序 前端开发 JavaScript
WXML模板语法-条件渲染和列表渲染
本文档介绍了微信小程序中的条件渲染和列表渲染。条件渲染主要使用`wx:if`、`wx:elif`、`wx:else`和`hidden`属性。`wx:if`通过判断表达式决定是否渲染代码块,而`hidden`通过切换CSS的`display`属性控制元素隐藏。两者在性能和使用场景上有区别,频繁切换推荐使用`hidden`,复杂条件推荐使用`wx:if`。列表渲染则利用`wx:for`遍历数组生成列表,可以通过`wx:for-index`和`wx:for-item`自定义索引和项的变量名,同时需使用`wx:key`为列表项指定唯一标识以优化渲染效率。
12 0
|
8月前
|
JavaScript
10Vue - 模板语法(插值-纯HTML)
10Vue - 模板语法(插值-纯HTML)
48 0
|
8月前
11Vue - 模板语法(插值-属性)
11Vue - 模板语法(插值-属性)
22 0
|
10月前
|
JavaScript 前端开发
js事件及语法
js事件及语法
40 0
|
6月前
|
JSON 小程序 前端开发
【微信小程序】WXML的模板语法与WXSS模板样式(二)
【微信小程序】WXML的模板语法与WXSS模板样式
66 0
|
6月前
|
小程序 JavaScript 容器
【微信小程序】WXML的模板语法与WXSS模板样式(一)
【微信小程序】WXML的模板语法与WXSS模板样式
48 0