微信小程序:6.事件

news2024/10/6 14:25:21

什么事事件

事件就是渲染层到逻辑层的通讯方式,比如提交表单,按钮点击都可以看作一个事件。
CleanShot 2024-04-19 at 09.52.06@2x.png

小程序中常用的事件

CleanShot 2024-04-19 at 09.52.35@2x.png

事件对象属性列表

当事件回调时,会收到一个事件对象event,他详细属性如夏表所示:
CleanShot 2024-04-19 at 09.53.48@2x.png

target和currentTarget的区别

target是触发该事件的源头组件,而currentTarget则是当前时间所绑定的事件:
CleanShot 2024-04-19 at 09.58.17@2x.png

bindtap的语法格式

在小程序中不会通过onclick进行鼠标点击时间,而是通过tap事件响应用户的触摸事件

//在js中定义
outerHandle(e){
    console.log(e)
  }
<view class="outview">
  <button type="primary" bind:tap="outerHandle">按钮</button>
</view>

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

通过调用this.setData(dataObject)方法,可以给页面中的data中的数据重新赋值
CleanShot 2024-04-19 at 10.06.06@2x.png
点击按钮number进行增加

<view class="outview">
  <text>{{number}}</text>
  <button type="primary" bind:tap="outerHandle">按钮</button>
</view>

事件传参

小程序中的事件穿参比较特殊,不能在绑定事件的同时进行传递参数
小程序中可以为组件童工data-自定义属性穿参,其中代表的是参数的名字,示例代码如下:

<button bind:tap="btnhandle" data-info="{{2}}">事件穿参数</button>

最终info会被解析为参数的名字
数字2会被解析为参数的值
在事件处理函数中可以使用event.target.dataset.参数名,可以拿到具体参数值

btnhandle(event){
    console.log(event.target.dataset)

    console.log(event.target.dataset.info)
  }

bindinput事件

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

<input type="text" bindinput="inputHandle"/>

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

 inputHandle(e){
      console.log(e.detail.value)
  }

实现文本框和Data之间的数据同步

实现步骤

  1. 定义数据
  2. 渲染结构
  3. 美化样式
  4. 绑定input事件处理函数
Page({

  /**
   * 页面的初始数据
   */
  data: {
      msg:"你好",
  },

2.在wxml中定义input绑定msg并且定义事件

 inputHandle(e){
    // console.log(e.detail.value);
    this.setData({
      msg:e.detail.value
    })
  },

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

网络安全实训Day16

网络空间安全实训-渗透测试 漏洞扫描 定义 扫描和探测目标范围内的主机存在哪些安全漏洞&#xff0c;或扫描目标范围内的那些主机存在某个指定的漏洞 漏扫工具 AWVS APPScan MSF 使用MSF扫描漏洞并利用 1.搜索需要的攻击模块 search ms17-010 2.使用攻击模块 use 模块名称…

改ip地址软件手机怎么弄?分享操作指南与注意事项

随着移动互联网的普及&#xff0c;手机已成为我们日常生活中不可或缺的工具。在某些情况下&#xff0c;我们可能需要更改手机的IP地址&#xff0c;以满足特定的网络需求或实现某些功能。然而&#xff0c;对于许多用户来说&#xff0c;如何在手机上更改IP地址可能是一个相对陌生…

【Android】 网络技术

前言 本文用于记录Android网络技术的使用&#xff0c; 包括我们如何发起一条HTTP请求、解析XML、JOSN格式的数据以及最好用的网络库Retrofit。 使用HTTP协议访问网络 关于HTTP协议的工作原理&#xff0c;我们只需要知道客户端向服务器发起一条HTTP请求&#xff0c;服务器接收…

HarmonyOS开发案例:【rating组件】

介绍 将引导开发者使用rating组件实现星级打分功能。 相关概念 [rating组件]&#xff1a;评分条&#xff0c;可根据用户判断进行打分。 环境搭建 软件要求 [DevEco Studio]版本&#xff1a;DevEco Studio 3.1 Release及以上版本。OpenHarmony SDK版本&#xff1a;API vers…

预见预判|AIRIOT智慧交通管理解决方案

随着机动车保有量的逐步增加&#xff0c;城市交通压力日益增大。同时&#xff0c;新能源车辆的快速发展虽然带来了环保效益&#xff0c;但也因不限号政策而进一步加剧了道路拥堵问题。此外&#xff0c;各类赛事和重大活动的交通管制措施也时常导致交通状况复杂多变。面对这些挑…

Linux--MyMiniTry--Vim

首先下载好vim,我们可以按以下的方式进行光标的移动&#xff08;也可以回车进行换行&#xff09; &#xff08;--> 进入教程&#xff09; &#xff08;初始的时候没有文本&#xff0c;你怎么按都没有用&#xff09; &#xff08;我们要先按 i &#xff0c;进行插入文本才…

maven修改默认编码格式为UTF-8

执行mvn -version查看maven版本信息发现&#xff0c;maven使用的编码格式为GBK。 为什么想到要修改编码格式呢&#xff1f;因为idea中我将文件格式统一设置为UTF-8&#xff08;如果不知道如何修改文件编码&#xff0c;可以参考文末&#xff09;&#xff0c;然后使用maven打包时…

[GXYCTF 2019]BabyUpload

过滤 <? 且后缀不能有 php 上传1.jpg文件&#xff0c;内容为&#xff1a; <script languagephp>eval($_POST[cmd]);</script> 但文件后缀为.jpg&#xff0c;蚁剑不能连接。那怎么办呢&#xff1f; .htaccess文件&#xff1a;解析.jpg文件中的php代码 &#xf…

LLaMA-Factory参数的解答(命令,单卡,预训练)

前面这个写过&#xff0c;但觉得写的不是很好&#xff0c;这次是参考命令运行脚本&#xff0c;讲解各个参数含义。后续尽可能会更新&#xff0c;可以关注一下专栏&#xff01;&#xff01; *这是个人写的参数解读&#xff0c;我并非该领域的人如果那个大佬看到有参数解读不对或…

vue echarts折线图 折线堆积图和折线面积图

vue echarts折线图 折线堆积图和折线面积图 1、折线堆积图和折线面积图的结合&#xff1b; 上代码 <template><section><divid"performaceLineChart"ref"performaceLineChartRef"style"width: 100%; height: 500px"></d…

Spark-机器学习(5)分类学习之朴素贝叶斯算法

在之前的文章中&#xff0c;我们学习了回归中的逻辑回归&#xff0c;并带来简单案例&#xff0c;学习用法&#xff0c;并带来了简单案例。想了解的朋友可以查看这篇文章。同时&#xff0c;希望我的文章能帮助到你&#xff0c;如果觉得我的文章写的不错&#xff0c;请留下你宝贵…

k8s-身份认证与权限

认证概述 Kubernetes作为一个分布式集群的管理工具&#xff0c;保证集群的安全性是其一个重要的任务。所谓的安全性其实就是保证对Kubernetes的各种客户端进行认证和鉴权操作。 在Kubernetes集群中&#xff0c;客户端通常有两类&#xff1a; User Account&#xff1a;一般是独…

原型链prototype、__proto、constructor的那些问题整理

再了解原型链之前,我们先来看看构造函数和实例对象的打印结构 - 函数 这里我们定义一个构造函数Fn,然后打印它的结构吧 function Fn(){} console.dir(Fn)控制台得到结构 从上面结构我们能看的出来,函数有两种原型,一种是作为函数特有的原型:prototype,另一种是作为对象的__…

记录wordpress网站搭建及当天被SEO优化收录

网站是前不就前搭建的&#xff0c;但是一直没有做SEO优化&#xff0c;今天花了点时间做下优化。记录下&#xff0c;喜欢的朋友点赞收藏下。 1.wordpress后台下载插件Yoast SEO插件&#xff0c;setting中搜索XML sitemaps&#xff0c;点view the XML sitemap&#xff0c;暂时不…

传媒论坛编辑部传媒论坛杂志社传媒论坛杂志2024年第7期目录

专题│场景传播研究 场景传播&#xff1a;一场遮盖自我与寻找自我的博弈 胡沈明; 3 基于CiteSpace的中国场景传播研究热点分析 管倩;粟银慧; 4-610《传媒论坛》投稿&#xff1a;cnqikantg126.com 数字世界的美与危&#xff1a;场景传播的失范与应对之举 王依晗;章洁…

srpingMVC基本使用

文章目录 1. springMVC基本功能(1) maven坐标导入(2) 编写表现层(3) springMVC配置类编写(4) 部署tomcat访问 2. 各种请求方法get请求post请求put请求delete请求请求参数提取 3. 请求参数接收(1) param参数接受封装到对象中 (2) 路劲参数接收集合接受时间类型接收json参数接收m…

鸿蒙OpenHarmony【轻量系统 编写“Hello World”程序】 (基于Hi3861开发板)

编写“Hello World”程序 下方将通过修改源码的方式展示如何编写简单程序&#xff0c;输出“Hello world”。请在下载的源码目录中进行下述操作。 确定目录结构。 开发者编写业务时&#xff0c;务必先在./applications/sample/wifi-iot/app路径下新建一个目录&#xff08;或一…

Electron中使用Prisma(以SQLite为例)

1、安装 Prisma 打开终端&#xff0c;执行以下命令安装 Prisma CLI&#xff1a; npm install prisma -g 2、初始化 Prisma 项目 在工作目录中执行以下命令来初始化一个新的 Prisma 项目&#xff1a; prisma init 这将创建一个新的文件夹&#xff0c;包含了必要的文件和目…

proteus+stm32+CubeMX+dht11+lcd1602

浅浅记录下过程遇到的问题&#x1f921;&#x1f921;&#x1f921; 1 供电网配置错误&#xff08;加上就好了 新起个名也会出这个 / 电源不起名 不创建估计项目也会&#xff09;没zet6的 proteus 里 固件库 账号注册半天没成 就用的stm32F103R6的然后发现单片机不输出高低电平…

ElasticSearch 安装(docker)

下载安装包 阿里云链接&#xff1a; elasticSearch.exe https://www.alipan.com/s/3A356NnmWaJ 提取码: 93da 点击链接保存&#xff0c;或者复制本段内容&#xff0c;打开「阿里云盘」APP &#xff0c;无需下载极速在线查看&#xff0c;视频原画倍速播放。 安装步骤 1、首先…