WXML模版语法-事件绑定
知识点1:什么是事件
- 事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。
知识点2:小程序中常用的事件
| 类型 | 绑定方式 | 事件描述 |
| tap | bindtap或bind:tap | 手指触摸后马上离开,类似于 HTML中的click 事件 |
| input | bindinput 或 bind:input | 文本框的输入事件 |
| change | bindchange 或 bind:change | 状态改变时触发 |
知识点3:事件对象的属性列表
- 当事件回调触发的时候,会收到一个事件对象event,它的详细属性列表如下:
| 属性 | 类型 | |
| type | String | 事件类型 |
| timeStamp | Integer | 页面打开到触发事件所经过的毫秒数 |
| target | Object | 触发事件的组件的一些属性值集合 |
| currentTarget | Object | 当前组件的一些属性值集合 |
| detail | Object | 额外的信息 |
| touches | Array | 触摸事件,当前停留在屏幕中的触摸点信息的数组 |
| changedTouches | Array | 触摸事件,当前变化的触摸点信息的数组 |
知识点4:target和currentTarget的区别
- target是触发该事件的源头组件,而currentTarget则是当前事件所绑定的组件。

<button
bind:tap="targetClick"
type="primary"
plain="true"
id="123"
>target按钮</button>
Page({targetClick(event){console.log(event)}
})
{type: "tap", timeStamp: 2827, target: {…}, currentTarget: {…}, mark: {…}, …}
changedTouches: [{…}]
currentTarget: {id: "123", offsetLeft: 0, offsetTop: 0, dataset: {…}}
detail: {x: 165.15625, y: 35.328125}
mark: {}
mut: false
target: {id: "123", offsetLeft: 0, offsetTop: 0, dataset: {…}}
timeStamp: 2827
touches: [{…}]
type: "tap"
__evName: "tap"
_allowWriteOnly: true
_relatedInfo: {anchorTargetText: "target按钮", anchorRelatedText: "", anchorTapTime: 1737007035902}
_requireActive: true
_userTap: true
__proto__: Object

<view bind:tap="targetClick" id="456" ><button type="primary"
id="123"
>target按钮</button></view>
Page({targetClick(event){console.log(event)}
})
{type: "tap", timeStamp: 4896, target: {…}, currentTarget: {…}, mark: {…}, …}
changedTouches: [{…}]
currentTarget: {id: "456", offsetLeft: 0, offsetTop: 0, dataset: {…}}
detail: {x: 97.828125, y: 60.65625}
mark: {}
mut: false
target: {id: "123", offsetLeft: 0, offsetTop: 25, dataset: {…}}
timeStamp: 4896
touches: [{…}]
type: "tap"
__evName: "tap"
_allowWriteOnly: true
_relatedInfo: {anchorTargetText: "target按钮", anchorRelatedText: "", anchorTapTime: 1737007515471}
_requireActive: true
_userTap: true
__proto__: Object
- 点击内部的按钮时,点击事件以冒泡的方式向外扩散,也会触发外层view 的tap 事件处理函数。
- target 指向的是触发事件的源头组件,因此,target是内部的按钮组件。(事件的触发者)
- currentTarget 指向的是当前正在触发事件的那个组件,因此,e.currentTarget 是当前的 view 组件。(事件的响应者)
知识点5:bindtap 语法格式
- 在小程序中,不存在HTML中的onClick鼠标点击事件,而是通过tap事件来响应用户的触摸行为。
<!-- 定义 -->
<button type="primary" bindtap="btnTapHandler">登录</button>
Page({//bindtap的实现btnTapHandler(e){console.log(e)}
})
知识点6:在事件处理函数中为data中的数据赋值
- 通过调用this.setData(dataObject)方法进行赋值。
<!-- 定义 -->
<button type="primary" bindtap="changeCountHandler">当前计数:{{countNum}}</button>
Page({data:{
countNum:0
},
//target 实现targetClick(event){console.log(event)},//bindtap 实现btnTapHandler(e){console.log(e)},//data 赋值changeCountHandler(e){this.setData({countNum:this.data.countNum+1})}
})
知识点7:事件传参
- 可以为组件提供data-*自定义属性传参,其中*代表的是参数的名字。
- 通过event中解析出传递的参数。
<!-- 如果传递数字需要用{{}}包括,否则默认为字符串 -->
<button type="primary" bindtap="eventHandler" data-name="Jeck" data-age="{{18}}">事件传参</button>
//data 事件传参eventHandler(e){console.log(e.target.dataset.name);}
知识点8:bindinput的语法格式
- 在小程序中,通过input事件来响应文本框的输入事件。
<view>------------------bindinput--------------------</view>
<input bind:tap="inputHandler" placeholder="请输入"></input>
//input 事件inputHandler(e){console.log(e)}
相关文章:
WXML模版语法-事件绑定
知识点1:什么是事件 事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。 知识点2:小程序中常用的事件 类型绑定方式事件描述tapbindtap或bind:tap手指触摸后马上离开,类似于…...
楚慧杯Web
WEB1 计算器 import requests rrequests.session() data{"answer":0} url"" for i in range(30):if i0:rrequests.get(url)dr.textdd.split(":")[22][1:].split("<br>")[0]data["answer"]str(eval(d))print(eval(d)…...
工商业储能电站能量管理本地系统及多站点云平台
一、储能站就地监控 Acre1-2000MG储能能量管理系统是针对工商业储能电站研制的本地化能量管理系统,可实现了储能电站的数据采集、数据处理、数据存储、数据查询与分析、可视化监控、报警管理、统计报表、策略管理、历史曲线等功能。其中策略管理,支持多…...
HTML标签笔记
黑马程序员视频地址:黑马程序员前端JavaScript入门到精通全套视频教程https://www.bilibili.com/video/BV1Y84y1L7Nn?vd_source0a2d366696f87e241adc64419bf12cab&spm_id_from333.788.videopod.episodes 标题与段落 标题 <h1>~<h6> 段落 <p…...
pthread_create函数
函数原型 pthread_create 是 POSIX 线程(pthread)库中的一个函数,用于在程序中创建一个新线程。 #include <pthread.h>int pthread_create(pthread_t *thread, const pthread_attr_t *attr,void *(*start_routine) (void *), void *a…...
C# 并发和并行的区别--16
目录 并发和并行 一.并发 定义 特点 代码示例 代码解释 二.并行 定义 特点 在C#中的体现 代码示例 代码解释 三.并发和并行的区别 四 .如何在C#中选择并发还是并行 1.考虑任务类型 2.代码示例 3.注意事项 五.总结 并发和并行 在编程领域,并发和并行是两个密切…...
Java日志配置
1.导入依赖 <dependency><groupId>org.apache.logging.log4j</groupId><artifactId>log4j-core</artifactId><version>2.23.1</version></dependency><dependency><groupId>org.apache.logging.log4j</groupI…...
python中的RPA->playwright自动化录制脚本实战案例笔记
playwright录制功能使用绕过登录操作 1、首先安装playwright pip install playwright2、 安装支持的浏览器 playwright install # 安装支持的浏览器:cr, chromium, ff, firefox, wk 和 webkit3、接着在自己的项目下运行录制命令: playwright codegen…...
Linux查看日志命令
问题排查过程: 1. 评估问题现象是否是操作问题,还是服务bug,页面出异常信息是后端,没抛异常信息有可能是前端渲染问题,F12抓包看那个字段没有数据(有时候需要前端帮忙确定是哪一个字段)&#x…...
(8)ERC20详细介绍
ERC20 是以太坊上的一种代币标准(同质化代币),由 Fabian Vogelsteller 在 2015 年提出。它定义了一组通用的接口和规则,使得开发者可以创建可互操作的代币。ERC20 代币在以太坊生态系统中非常流行,广泛应用于各种去中心…...
opencv projectPoints函数 computeCorrespondEpilines函数 undistortPoints函数
opencv projectPoints函数 cv::projectPoints 是 OpenCV 中用于将三维点投影到二维图像平面的函数。它通常用于计算在相机坐标系下的三维点在图像坐标系中的位置,考虑了相机的内参和外参。 函数原型 void cv::projectPoints(InputArray objectPoints,InputArray …...
springboot集成websocket实现实时大量数据,效率性能高
前言 小编我将用CSDN记录软件开发求学之路上亲身所得与所学的心得与知识,有兴趣的小伙伴可以关注一下! 也许一个人独行,可以走的很快,但是一群人结伴而行,才能走的更远!让我们在成长的道路上互相学习&…...
游戏引擎学习第80天
Blackboard:增强碰撞循环,循环遍历两种类型的 t 值 计划对现有的碰撞检测循环进行修改,以便实现一些新的功能。具体来说,是希望处理在游戏中定义可行走区域和地面的一些实体。尽管这是一个2D游戏,目标是构建一些更丰富…...
Windows 上的 MySQL 8.4.3 和 WSL(Ubuntu)的 MySQL 8.0.40 之间配置 主从同步
在 Windows 上的 MySQL 8.4.3 和 WSL(Ubuntu)的 MySQL 8.0.40 之间配置 主从同步(Master-Slave Replication) 的过程略有不同,因为两者的 MySQL 版本和环境存在差异。以下是详细步骤,帮助你完成跨平台的主从…...
【狂热算法篇】探秘图论之 Floyd 算法:解锁最短路径的神秘密码(通俗易懂版)
: 羑悻的小杀马特.-CSDN博客羑悻的小杀马特.擅长C/C题海汇总,AI学习,c的不归之路,等方面的知识,羑悻的小杀马特.关注算法,c,c语言,青少年编程领域.https://blog.csdn.net/2401_82648291?spm1010.2135.3001.5343 在本篇文章中,博主将带大家去学习所谓的…...
Sentinel配置流控规则详解
前言 在微服务架构中,流量控制(Flow Control)是保障服务稳定性的重要手段之一。Sentinel作为一款开源的流量控制、熔断降级Java库,以其丰富的应用场景和完善的监控能力,在微服务保护中扮演了重要角色。本文将详细介绍…...
解锁动态规划的奥秘:从零到精通的创新思维解析(6)
解锁动态规划的奥秘:从零到精通的创新思维解析(6) 前言: 在动态规划的众多问题中,多状态DP问题是一个非常重要的类别。它的难点在于如何设计合适的状态表示和转移方程,从而高效地解决问题。 多状态DP的核…...
Qwen2.5 3B、7B、14B在文本按照规范进行标准化改写任务上的表现
任务介绍:军事杂志方向资料标准化改写任务 1. 任务目标 本任务的目标是对军事杂志领域的非标准化资料进行改写,确保其符合军事文献的写作规范和标准格式。通过改写,保留原文的核心内容和信息,同时提升语言的准确性、简洁性和专业…...
Oracle报错ORA-01078、LRM-00109
虚拟机异常关机后,rac数据库备机无法启动数据库,报错如下 解决方法: 找到如下路径文件 执行: cp init.ora.016202516818 /u01/app/oracle/product/19.3.0/db/dbs/ mv init.ora.016202516818 initplm2.ora 再次进入命令行sqlpl…...
免费为企业IT规划WSUS:Windows Server 更新服务 (WSUS) 之快速入门教程(一)
哈喽大家好,欢迎来到虚拟化时代君(XNHCYL),收不到通知请将我点击星标!“ 大家好,我是虚拟化时代君,一位潜心于互联网的技术宅男。这里每天为你分享各种你感兴趣的技术、教程、软件、资源、福利…...
Python|GIF 解析与构建(5):手搓截屏和帧率控制
目录 Python|GIF 解析与构建(5):手搓截屏和帧率控制 一、引言 二、技术实现:手搓截屏模块 2.1 核心原理 2.2 代码解析:ScreenshotData类 2.2.1 截图函数:capture_screen 三、技术实现&…...
MPNet:旋转机械轻量化故障诊断模型详解python代码复现
目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...
【第二十一章 SDIO接口(SDIO)】
第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...
ESP32读取DHT11温湿度数据
芯片:ESP32 环境:Arduino 一、安装DHT11传感器库 红框的库,别安装错了 二、代码 注意,DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...
STM32标准库-DMA直接存储器存取
文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA(Direct Memory Access)直接存储器存取 DMA可以提供外设…...
pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)
目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关࿰…...
Mobile ALOHA全身模仿学习
一、题目 Mobile ALOHA:通过低成本全身远程操作学习双手移动操作 传统模仿学习(Imitation Learning)缺点:聚焦与桌面操作,缺乏通用任务所需的移动性和灵活性 本论文优点:(1)在ALOHA…...
使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度
文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...
嵌入式学习笔记DAY33(网络编程——TCP)
一、网络架构 C/S (client/server 客户端/服务器):由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序,负责提供用户界面和交互逻辑 ,接收用户输入,向服务器发送请求,并展示服务…...
LRU 缓存机制详解与实现(Java版) + 力扣解决
📌 LRU 缓存机制详解与实现(Java版) 一、📖 问题背景 在日常开发中,我们经常会使用 缓存(Cache) 来提升性能。但由于内存有限,缓存不可能无限增长,于是需要策略决定&am…...
