小程序开发——小程序的事件

1.事件对象

事件与事件对象概述

事件是一种用户行为,用户的点击、滑动等操作都可以成为事件。事件也是一种通信方式,能够完成视图层(WXML页面文件)与逻辑层(JS逻辑文件)之间的通信。 事件对象是指用户在点击、滑动等动作触发后形成的一个带有数据的Object对象,该对象可在组件绑定的逻辑函数中作为参数传入(通常习惯用字母e表示)。在WXML页面文件中,事件绑定到组件上,当事件触发时,就会执行逻辑层中对应的事件处理函数。事件对象可携带额外信息,如id、dataset、touches等数据,后续可在函数中获取相应的数据进行操作。

事件对象分类

事件对象可以分为:基础事件(Bas出eEvent)、自定义事件(CustomEvent)和触摸事件(TouchEvent)。其中后两个均继承自基础事件,即完整的拥有父类全部属性。

基础事件

自定义事件:自定义事件继承自基础事件,即包含基础事件的所有属性,此外还有detail属性

 

触摸事件:继承自基础事件,即包含基础事件的所有属性,此外还有touches和changedTouches属性

 

target与currentTarget:在事件对象中,比较重要的属性是target与currentTarget,二者的子属性完全一样。

 

事件对象打印案例——实现效果

 

代码

<!--pages/demo3-1/eventObject.wxml-->
<view class='container'><view class='page-body'><text class='h1'>事件对象的打印案例</text><view class='demo-box'><view class="title">按钮点击事件bindtap</view><button type="primary" bindtap="printEvent" data-info="这是绑定的数据">点击打印</button></view><view class='demo-box'><view class="title">触摸事件对象的打印</view><view class="touch-view" bindtouchstart="printEvent" bindtouchend="printEvent"> 请触摸当前视图 </view></view><view class='demo-box'><view class="title">内容输出区域</view><text class="content">{{content}}</text></view></view>
</view>
// pages/demo3-1/eventObject.jsprintEvent: function(e) {console.log(e) //打印事件对象var eventObjStr=JSON.stringify(e)this.setData({ content: eventObjStr})},

 

2.事件类型

在小程序中,事件分为两大类型:

冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。

非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。

冒泡事件:组件上的冒泡事件被触发后,该事件会向父节点传递。小程序提供的全部冒泡事件如下表,除表之外的其他组件自定义事件如无特殊声明都是非冒泡事件。

冒泡事件案例——实现效果

 

代码

<!--pages/demo3-2/ bubblingEvent.wxml-->
<view class='container'><view class='page-body'><text class='h1'>冒泡事件案例</text><view class='demo-box'><view class="title">冒泡事件</view><view class="content">请分别点击不同view,观察控制器输出</view><view class="view1" bindtap="view1click">View 1<view class="view2" bindtap="view2click">View 2<view class="view3" bindtap="view3click">
View 3</view></view></view></view></view>
</view>
<!--pages/demo3-2/ bubblingEvent.wxml--> 
Page({view1click:function(){console.log("view1click")},view2click: function () {  console.log("view2click")  },view3click: function () {  console.log("view3click")  },
})

 

3.事件绑定类型

阻止冒泡事件

事件绑定分别有bind与catch两种,区别如下:bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。其中bindtap的方式已经通过3.2.1的案例初步了解,接下来将通过修改该案例帮助理解catchtap阻止冒泡。

修改bindtap为catchtap,如下述代码所示:

<view class="view1" bindtap="view1click"> View 1<view class="view2" catchtap="view2click">  <!-- catchtap可阻止事件继续冒泡 -->View 2<view class="view3" bindtap="view3click"> View 3</view></view>
</view>

保存后再次点击view3,可看到日志只会输出view3click与view2click,说明冒泡事件被阻止,如图

 

区别currentTarget与target

完善案例的WXML代码,在3.3.1节基础上继续完善案例以便更深刻的理解事件对象中的currentTarget与target的区别。首先给bubblingEvent.wxml的三个view添加上id属性,示例代码如下所示:

<view  class="view1" id="v1" bindtap="view1click">  View 1
<view  class="view2" id="v2" catchtap="view2click">  <!-- catchtap可阻止事件继续冒泡 -->View 2<view  class="view3" id="v3" bindtap="view3click"> View 3</view></view>
</view>

 JS打印该对象:在JS文件里对应的事件处理函数中传入事件对象,并打印该对象。示例代码如下所示:

Page({view1click:function(e){console.log(e, "view1click")},view2click: function (e) {  console.log(e, "view2click")  },view3click: function (e) {  console.log(e, "view3click")  },
})

实现效果说明:控制器具体输出效果如图所示:

 

4.小结

 第1部分是事件对象,要能区别事件与事件对象的概念,并了解事件对象有哪些分类和常用的属性。通过事件对象打印案例的学习能够对事件对象有一个更直观的理解。 第2部分讲了事件的两大类型冒泡与非冒泡,只需记住一些冒泡的特例即可,通过冒泡事件案例能够直观理解冒泡事件的传递过程。 第3部分是事件绑定的两种类型bind与catch,catch能够阻止冒泡,通过对于案例的改写将有具体的了解。在事件对象中,以data-*开头绑定的数据往往藏在currentTarget与target两个属性中,因此通过案例改写将帮助更好地理解二者的区别。 

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

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

相关文章

uniapp开发app,在ios真机上出现的css样式问题

比如下面的问题&#xff0c;在iphone 13上出现&#xff0c;在iphone xR上正常。 问题一&#xff1a;border:1rpx造成边框显示不全 在iphone13上border边框有一部分不显示&#xff1a; 在iphone xR上显示正常&#xff1a; 解决办法是&#xff1a; 将border边框设置中的1rpx改…

Burp Suite配置过滤忽略Ruby code injection和XML injection类型的安全问题

可以使用扫描配置中的"Active Scan"选项。请按照以下步骤进行配置&#xff1a; 打开Burp Suite并启动您的目标应用程序。 载入您的目标应用程序并确保它已配置为代理Burp Suite。 转到Burp Suite的"Proxy"选项卡&#xff0c;并确保Proxy Server正在运行。…

eslint识别不了别名解决方法

第一步 npm i eslint-import-resolver-alias -D第二步&#xff1a;在 eslintrc.js 配置 module.exports {settings: {import/resolver: {alias: {map: [// 这里参照webpack的别名配置映射[, ./src]],// 引用的时候可以忽略后缀extensions: [.vue, .js, .ts, .tsx, .jsx, .json…

分享一款基于 AI 的 Chrome 插件

最近使用大模型比较多&#xff0c;公司虽然提供了免费的 ChatGPT 但是需要跳转特定页面才能访问&#xff0c;比较麻烦&#xff0c;于是就想到是否可以开发一款类似于有道词典一样的 Chrome 插件&#xff0c;可以在任意页面使用&#xff0c;虽然市面上也有类似的插件&#xff0c…

【ROS入门】机器人系统仿真——URDF集成Gazebo

文章结构 URDF与Gazebo基本集成流程创建功能包编写URDF或Xacro文件启动 Gazebo 并显示机器人模型 URDF集成Gazebo相关设置collisioninertial颜色设置 URDF集成Gazebo实操编写封装惯性矩阵算法的 xacro 文件复制相关 xacro 文件&#xff0c;并设置 collision inertial 以及 colo…

Python基础入门例程18-NP18 生成数字列表(列表)

目录 描述 输入描述&#xff1a; 输出描述&#xff1a; 示例1 解答&#xff1a; 说明&#xff1a; 描述 牛牛在牛客网系统录入了一连串数字&#xff0c;数字之间依靠逗号隔开&#xff0c;你能帮助他将这些数字存储在列表中吗&#xff0c;列表元素以int的形式。 输入描述…

一文搞懂 MineCraft 服务器启动操作和常见问题 2023年10月

文章目录 前言1. 新建文件夹2. 创建 bat 文件3. 编辑 bat 文件4. 启动服务器5. 恭喜完成 文章持续更新中&#xff0c;如果你有问题可以通过 qq 1317699264 获取免费协助&#xff0c;解决的问题将会被更新到本文章中 前言 无论你是使用服务端整合包&#xff0c;还是从上一篇我的…

Kafka-Java二:Spring配置kafka消息发送端的缓冲区

一、涉及到的组件概念 1.1、缓冲区 1.2、本地线程 1.3.本地线程消息推送策略 二、各组件的解释参见代码注释 // 配置消息的缓冲区/** 设置消息发送者端的缓冲区大小&#xff0c;如果设置了缓冲区&#xff0c;消息会先发送到缓冲区&#xff0c;可以提供发送性能* 默认大小是32…

css为盒子设置滚动条隐藏滚动条

省流&#xff1a;为盒子设置宽高&#xff0c;设置滚动条方向&#xff0c;隐藏滚动条。 首先&#xff0c;要为需要添加滚动条的盒子设置固定的高度和宽度&#xff0c;这样才能让内容超过盒子的边缘。 .box {width: 300px;height: 300px; }然后&#xff0c;给盒子加入overflow属…

【开源】基于SpringBoot的天然气工程业务管理系统的设计和实现

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块三、使用角色3.1 施工人员3.2 管理员 四、数据库设计4.1 用户表4.2 分公司表4.3 角色表4.4 数据字典表4.5 工程项目表4.6 使用材料表4.7 使用材料领用表4.8 整体E-R图 五、系统展示六、核心代码6.1 查询工程项目6.2 工程物资…

区块链的概念和特征

1.区块链的概念 区块链是一种去中心化的分布式账本技术&#xff0c;它使用密码学方法保证了数据交换和记录的安全性和可信度。区块链通过连接多个区块来组成一个链式结构&#xff0c;并利用共识算法来确保每个节点都有相同的记录和更新。这样就可以避免中心化机构的单点故障和…

通过el-tree 懒加载树,创建国家地区四级树

全国四级行政地区树数据库sql下载路径&#xff1a;【免费】全国四级地区(省市县)数据表sql资源-CSDN文库https://download.csdn.net/download/weixin_51722520/88469807?spm1001.2014.3001.5503 我在后台获取地区信息添加了限制&#xff0c;只获取parentid为当前的地…

LeetCode题:70爬楼梯,126斐波那契数

目录 70&#xff1a;爬楼梯 题目要求&#xff1a; 解题思路&#xff1a;&#xff08;类似斐波那契数&#xff09; 递归解法&#xff1a; 非递归解法&#xff1a; 126&#xff1a;斐波那契数 题目要求&#xff1a; 解题思路&#xff1a; 递归解法&#xff1a; 非递归解…

python—openpyxl操作excel详解

前言 openpyxl属于第三方模块&#xff0c;在python中用来处理excel文件。 可以对excel进行的操作有&#xff1a;读写、修改、调整样式及插入图片等。 但只能用来处理【 .xlsx】 后缀的excel文件。 使用前需要先安装&#xff0c;安装方法&#xff1a; pip install openpyxl…

Doceker-compose——容器群集编排管理工具

目录 Docker-compose 1、Docker-compose 的三大概念 2、YAML文件格式及编写注意事项 1&#xff09;使用 YAML 时需要注意下面事项 2&#xff09;ymal文件格式 3&#xff09;json格式 3、Docker Compose配置常用字段 4、Docker-compose的四种重启策略 5、Docker Compos…

k8s statefulSet 学习笔记

文章目录 缩写: stsweb-sts.yaml创建sts扩缩容金丝雀发布OnDelete 删除时更新 缩写: sts 通过 kubectl api-resources 可以查到&#xff1a; NAMESHORTNAMESAPIVERSIONNAMESPACEDKINDstatefulsetsstsapps/v1trueStatefulSet web-sts.yaml apiVersion: v1 kind: Service met…

Lintcode 3715 · Lowest Common Ancestor V (最小祖先好题)

3715 Lowest Common Ancestor VPRE Algorithms Medium This topic is a pre-release topic. If you encounter any problems, please contact us via “Problem Correction”, and we will upgrade your account to VIP as a thank you. Description Given a binary tree wit…

1688阿里巴巴中国站电商数据官方平台API接口按图搜索1688商品(拍立淘)响应示例说明

按图搜索1688商品数据接口的用途是帮助用户通过上传图片来搜索相似的商品&#xff0c;或者通过图片链接获取商品详情信息、SKU信息、销量信息等。 1688.item_search_img-按图搜索1688商品&#xff08;拍立淘&#xff09; 公共参数 请求地址: 注册调用key请求接入 名称类型必…

Canal整合SpringBoot详解(一)

文章目录 Canal整合SpringBoot详解&#xff08;一&#xff09;什么是canal搭建Kafka3.2.1集群⭐Kafka集群机器规划创建3台虚拟机&#xff08;centos7系统&#xff09;必要的环境准备&#xff08;3台虚拟机都要执行如下操作&#xff09;⭐分别修改每个服务器的hosts文件&#xf…

为指定 java 类生成 PlantUML puml文件工具( v2 )

AttributePumlVO.java&#xff1a; import lombok.Getter; import lombok.Setter;import java.io.Serializable;Getter Setter public class AttributePumlVO implements Serializable {/*** 属性名称*/private String name;/*** 属性类型*/private Class type;Overridepublic …