【微信小程序_7_WXML 模板语法 - 按钮事件和输入框事件绑定】

时间：2024-10-12 16:48:30

摘要：本文主要介绍了小程序中 WXML 模板语法的事件绑定相关知识。首先阐述了事件是渲染层到逻辑层的通讯方式，包括交互事件的过程。接着介绍了小程序中常用的事件，如 tap、input 和 change 及其绑定方式和事件描述。详细说明了事件对象的属性列表，包括 type、timeStamp、target、currentTarget、detail、touches 和 changedTouches。讲解了 bindtap 的语法格式，以及在事件处理函数中为 data 中的数据赋值的方法。还介绍了小程序中特殊的事件传参方式，包括错误和正确的示例。阐述了 bindinput 的语法格式，最后说明了实现文本框和 data 之间数据同步的步骤，并提供了各个功能点的完整示例代码。

微信小程序_7_WXML 模板语法 - 按钮事件和输入框事件绑定

  • 一、事件概述
  • 二、小程序中常用的事件
    • 1.类型与绑定方式及事件描述：
  • 三、事件对象的属性列表
  • 四、bindtap的语法格式
    • 1.通过bindtap，可以为组件绑定tap触摸事件
  • 五、在事件处理函数中为 data 中的数据赋值
  • 六、事件传参
    • 1.小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。例如下面是错误的写法：
    • 2.正确传递参数的写法
  • 七、bindinput的语法格式
    • 1.通过bindinput，可以为文本框绑定输入事件：
    • 2.在页面的.js文件中定义事件处理函数：
  • 八、实现文本框和 data 之间的数据同步

一、事件概述

1.什么是事件：事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为反馈到逻辑层进行业务的处理。例如用户在界面上进行点击操作，触发相应的事件，逻辑层可以根据这个事件进行特定的业务处理。
2.描述交互事件过程：用户交互触发事件，如点击按钮或在文本框输入等，然后渲染层将事件传递到逻辑层，逻辑层收到回调后进行相应的业务处理。

二、小程序中常用的事件

1.类型与绑定方式及事件描述：

  • （1）tap：可以通过bindtap或bind:tap绑定。手指触摸后马上离开，类似于 HTML 中的click事件。例如：
    点击按钮
  • （2）input：可以通过bindinput或bind:input绑定。文本框的输入事件。例如：
  • （3）change：可以通过bindchange或bind:change绑定。状态改变时触发。

三、事件对象的属性列表

当事件回调触发的时候，会收到一个事件对象event，它的详细属性如下：

  • type：String 类型，表示事件类型。
  • timeStamp：Integer 类型，页面打开到触发事件所经过的毫秒数。
  • target：Object 类型，触发事件的组件的一些属性值集合。
  • currentTarget：Object 类型，当前组件的一些属性值集合。

例如：

<view class="outer-view" bindtap="outerHandler">
  按 <button type="primary">按钮</button>
</view>

点击内部的按钮时，对于外层的 view 来说，e.target指向的是触发事件的源头组件，即内部的按钮组件；
e.currentTarget指向的是当前正在触发事件的那个组件，即当前的 view 组件。

  • detail：Object 类型，额外的信息。
  • touches：Array 类型，触摸事件，当前停留在屏幕中的触摸点信息的数组。
  • changedTouches：Array 类型，触摸事件，当前变化的触摸点信息的数组。

四、bindtap的语法格式

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

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

语法如下：

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

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

Page({
   
  btnTapHandler(e)

相关文章