小程序开发中事件绑定的执行方法

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。小程序中常用属性和绑定方式如下:
1692091969086_小程序.png

当事件回调触发的时候,会收到一个事件对象 event,它的详细属性如下表所示:

事件对象的属性列表

target 是触发该事件的源头组件,而 currentTarget 则是当前事件所绑定的组件。举例如下:

target

点击内部的按钮时,点击事件以冒泡的方式向外扩散,也会触发外层 view 的 tap 事件处理函数。此时,对于外层的 view 来说:

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

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

bindtap 的语法格式

在小程序中,不存在 HTML 中的 onclick 鼠标点击事件,而是通过 tap 事件来响应用户的触摸行为。通过 bindtap,可以为组件绑定 tap 触摸事件,语法如下:

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

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

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

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

通过调用 this.setData(dataObject) 方法,可以给页面 data 中的数据重新赋值,示例如下:

//页面的.js文件
Page({data: {count: 0},// 修改 count 的值changeCount(){this.setDatz({count: this.data.count + 1}}
}

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

通过调用 this.setData(dataObject) 方法,可以给页面 data 中的数据重新赋值,示例如下:

//页面的.js文件
Page({data: {count: 0}.//修改count 的值changeCount(){this.sesfuta({count: this.data.count + 1})}
}

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

通过调用 this.setData(dataObject) 方法,可以给页面 data 中的数据重新赋值,示例如下:

// 页面的.js文件
Page({data: {count: 0},//修改count的值changeCogpt() {this.setData({count: this.data.count + 1}}
}

事件传参

小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数。例如,下面的代码将不能正常工作:

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

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

可以为组件提供 data-* 自定义属性传参,其中 * 代表的是参数的名字,示例代码如下:

<button bindtap="btnHandler"data-info="{{2}}">事件传参</button>

最终info 会被解析为参数的名字,数值 2 会被解析为参数的值。

在事件处理函数中,通过 event.target.dataset.参数名 即可获取到具体参数的值,示例代码如下:

btnHandler(event){// dataset 是一个对象,包含了所有通过 data-*传递过来的参数项console.log(event.target.dataset)//通过dataset 可以访问到具体参数的值console.log(event.target.dataset.info)
}

bindinput 的语法格式

在小程序中,通过 input 事件来响应文本框的输入事件,通过 bindinput,可以为文本框绑定输入事件:

<input bindinput="inputHandler"><input>

在页面的 .js 文件中定义事件处理函数:

inputHandler(e){// e.detail.vaue是变化过后,文本框最新的值console.log(e.detail.value)
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/92479.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Unity游戏源码分享-中国象棋Unity5.6版本

Unity游戏源码分享-中国象棋Unity5.6版本 项目地址&#xff1a; https://download.csdn.net/download/Highning0007/88215699

HTML5的介绍和基本框架

目录 HTML5 HTML5介绍 HTML5的DOCTYPE声明 HTML5基本骨架 html标签 head标签 body标签 title标签 meta标签 在vscode中写出第一个小框架 HTML5 HTML5介绍 HTML5是用来描述网页的一种语言&#xff0c;被称为超文本标记语言。用HTML5编写的文件&#xff0c;后缀以.ht…

jenkins自动化构建保姆级教程(持续更新中)

1.安装 1.1版本说明 访问jenkins官网 https://www.jenkins.io/&#xff0c;进入到首页 点击【Download】按钮进入到jenkins下载界面 左侧显示的是最新的长期支持版本&#xff0c;右侧显示的是最新的可测试版本&#xff08;可能不稳定&#xff09;&#xff0c;建议使用最新的…

你真的了解数据结构与算法吗?

数据结构与算法&#xff0c;是理论和实践必须紧密结合的一门学科&#xff0c;有关数据结构和算法同类的课程或书籍&#xff0c;有些只是名为“数据结构”&#xff0c;而非“数据结构与算法”&#xff0c;它们在内容上并无很大区别。 实际上&#xff0c;数据结构和算法&#xf…

【Python】使用python解析普通格式的报文为someip格式报文

文章目录 1.安装scapy库2.示例 1.安装scapy库 使用 pip 安装 scapy 第三方库&#xff0c;打开 cmd&#xff0c;输入以下命令&#xff1a; pip install scapy出现如图所示&#xff0c;表示安装成功&#xff1a; 2.示例 要解析someip格式报文&#xff0c;需要导入someip模块&a…

深入理解Vue 3.0x中的Suspense和异步组件

深入理解Vue 3.0x中的Suspense和异步组件 Vue 3.0x作为Vue.js框架的最新版本&#xff0c;引入了许多创新特性&#xff0c;其中Suspense和异步组件是重要的改进之一。在本文中&#xff0c;我们将深入探讨这两个特性&#xff0c;了解它们如何为现代Web应用带来更好的性能和用户体…

企业电子招投标采购系统源码之电子招投标的组成 tbms

​ 功能模块&#xff1a; 待办消息&#xff0c;招标公告&#xff0c;中标公告&#xff0c;信息发布 描述&#xff1a; 全过程数字化采购管理&#xff0c;打造从供应商管理到采购招投标、采购合同、采购执行的全过程数字化管理。通供应商门户具备内外协同的能力&#xff0c;为…

数据库操作不再困难,MyBatis动态Sql标签解析

系列文章目录 MyBatis缓存原理 Mybatis的CachingExecutor与二级缓存 Mybatis plugin 的使用及原理 MyBatis四大组件Executor、StatementHandler、ParameterHandler、ResultSetHandler 详解 MyBatisSpringboot 启动到SQL执行全流程 数据库操作不再困难&#xff0c;MyBatis动态S…

windows11下配置vscode中c/c++环境

本文默认已经下载且安装好vscode&#xff0c;主要是解决环境变量配置以及编译task、launch文件的问题。 自己尝试过许多博客&#xff0c;最后还是通过这种方法配置成功了。 Linux(ubuntu 20.04)配置vscode可以直接跳转到配置task、launch文件&#xff0c;不需要下载mingw与配…

MySQL和Redis如何保证数据一致性

MySQL与Redis都是常用的数据存储和缓存系统。为了提高应用程序的性能和可伸缩性&#xff0c;很多应用程序将MySQL和Redis一起使用&#xff0c;其中MySQL作为主要的持久存储&#xff0c;而Redis作为主要的缓存。在这种情况下&#xff0c;应用程序需要确保MySQL和Redis中的数据是…

拒绝摆烂!C语言练习打卡第二天

&#x1f525;博客主页&#xff1a;小王又困了 &#x1f4da;系列专栏&#xff1a;每日一练 &#x1f31f;人之为学&#xff0c;不日近则日退 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、选择题 &#x1f4dd;1.第一题 &#x1f4dd;2.第二题 &#x1f4dd;…

Unity C# 之 Http 获取网页的 html 数据,并去掉 html 格式等相关信息

Unity C# 之 Http 获取网页的 html 数据&#xff0c;并去掉 html 格式等相关信息 目录 Unity C# 之 Http 获取网页的 html 数据&#xff0c;并去掉 html 格式等相关信息 一、简单介绍 二、实现原理 三、注意事项 四、效果预览 五、关键代码 一、简单介绍 Unity中的一些知…

python优雅地爬虫!

背景 我需要获得新闻&#xff0c;然后tts&#xff0c;在每天上班的路上可以听一下。具体的方案后期我也会做一次分享。先看我喜欢的万能的老路&#xff1a;获得html内容-> python的工具库解析&#xff0c;获得元素中的内容&#xff0c;完成。 好家伙&#xff0c;我知道我爬…

【AI绘画】3分钟学会ikun幻术图

目录 前言一、效果展示二、准备工作三、操作步骤3.1平台创建实例3.2 启动SD 四、安装QR Code Monster 模型五、成图 前言 大家热爱的ikun幻术在今天的分享中将呈现。在本文中&#xff0c;我们将揭示一个备受欢迎的图像幻术技术&#xff0c;让您感受到令人惊叹的视觉创造力。 …

cuda+anaconda+pytorch按照教程

首先安装显卡对应的CUDA版本&#xff0c;关键点在于区别显卡支持的CUDA最高版本和运行版本 1、查看当前显卡支持的最高版本&#xff0c;有两种方式&#xff1a; 1&#xff09;NVIDIA控制面板—>帮助—>系统信息—>组件—>NVCUDA.dll对应版本 请注意&#xff0c;12…

微服务02-docker

1、Docker架构 1.1 镜像和容器 Docker中有几个重要的概念: 镜像(Image):Docker将应用程序及其所需的依赖、函数库、环境、配置等文件打包在一起,称为镜像。Docker镜像是用于创建 Docker 容器的模板 。就像面向对象编程中的类。 容器(Container):镜像中的应用程序运…

时序预测 | MATLAB实现WOA-CNN-BiLSTM鲸鱼算法优化卷积双向长短期记忆神经网络时间序列预测

时序预测 | MATLAB实现WOA-CNN-BiLSTM鲸鱼算法优化卷积双向长短期记忆神经网络时间序列预测 目录 时序预测 | MATLAB实现WOA-CNN-BiLSTM鲸鱼算法优化卷积双向长短期记忆神经网络时间序列预测预测效果基本介绍程序设计学习总结参考资料 预测效果 基本介绍 时序预测 | MATLAB实现…

Python爱心光波

文章目录 前言Turtle入门简单案例入门函数 爱心光波程序设计程序分析 尾声 前言 七夕要来啦&#xff0c;博主在闲暇之余创作了一个爱心光波&#xff0c;感兴趣的小伙伴们快来看看吧&#xff01; Turtle入门 Turtle 是一个简单而直观的绘图工具&#xff0c;它可以帮助你通过简…

java:JDBC

文章目录 什么是JDBCJDBC使用步骤详解各个对象DriverManagerConnectionStatementResultSetPreparedStatement JDBC控制事务操作步骤示例 什么是JDBC 我们知道&#xff0c;数据库有很多种&#xff0c;比如 mysql&#xff0c;Oracle&#xff0c;DB2等等&#xff0c;如果每一种数…

2024生物发酵展,双展联动·见证发酵“智“造力,3月济南见

BIO CHINA 2024 济南生物发酵展 2024年3月6-8日 | 山东国际会展中心 BIO CHINA 2024 上海生物发酵展 2024年8月7-9日 | 上海新国际博览中心 济南展&上海展&#xff0c;两展联动纵深布局新产业 BIO CHINA 生物发酵展&#xff0c; 源于2013年创办于上海的“上海国际生物…