微信小程序开发系列-06事件

什么是事件

  • 事件是视图层到逻辑层的通讯方式。
  • 事件可以将用户的行为反馈到逻辑层进行处理。
  • 事件可以绑定在组件上,当达到触发条件时,就会执行逻辑层中对应的事件处理函数。
  • 事件对象可以携带额外信息,如 id, dataset, touches。

事件分类

事件分为冒泡事件和非冒泡事件:

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

WXML的冒泡事件列表:

类型触发条件最低版本
touchstart手指触摸动作开始
touchmove手指触摸后移动
touchcancel手指触摸动作被打断,如来电提醒,弹窗
touchend手指触摸动作结束
tap手指触摸后马上离开
longpress手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发1.5.0
longtap手指触摸后,超过350ms再离开(推荐使用longpress事件代替)
transitionend会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart会在一个 WXSS animation 动画开始时触发
animationiteration会在一个 WXSS animation 一次迭代结束时触发
animationend会在一个 WXSS animation 动画完成时触发
touchforcechange在支持 3D Touch 的 iPhone 设备,重按时会触发1.9.90

注:除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件,如 form 的submit事件,input 的input事件,scroll-view 的scroll事件,(详见各个组件)

后面举例看看冒泡事件和非冒泡事件具体是怎样的形式。

事件对象

当组件触发事件时,逻辑层绑定该事件的处理函数会收到一个事件对象。事件对象有三种:基础事件对象、触摸事件对象、自定义事件对象。

BaseEvent 基础事件对象

属性列表

属性类型说明基础库版本
typeString事件类型
timeStampInteger事件生成时的时间戳, 页面打开到触发事件所经过的毫秒数.
targetObject触发事件的组件的一些属性值集合
currentTargetObject当前组件的一些属性值集合
markObject事件标记数据2.7.1

CustomEvent 自定义事件对象(继承BaseEvent)

属性类型说明
detailObject额外的信息

TouchEvent 触摸事件对象(继承BaseEvent)

属性类型说明
touchesArray触摸事件,当前停留在屏幕中的触摸点信息的数组
changedTouchesArray触摸事件,当前变化的触摸点信息的数组

事件的使用方式

普通事件绑定

请添加图片描述

自基础库版本 1.5.0 起,在大多数组件和自定义组件中, bind 后可以紧跟一个冒号,其含义不变,如 bind:tap 。基础库版本 2.8.1 起,在所有组件中开始提供这个支持。

间接事件绑定

事件绑定函数可以是一个数据绑定,通过这种间接的方式来绑定实际的事件处理函数。此时,页面的 this.data.handlerName 必须是一个字符串,指定事件处理函数名;如果它是个空字符串,则这个绑定会失效(可以利用这个特性来暂时禁用一些事件)

请添加图片描述

冒泡事件

bind

本例子定义了三个view:outer、middle、inner且层层嵌套。然后分别bind 3个函数:outerTap、middleTap、innerTap。当我点击“inner view”时,分别打印三个函数的event对象。

请添加图片描述

catch

如果想要阻止事件冒泡,可以使用catch来绑定事件, catch 会阻止事件向上冒泡。

请添加图片描述

上例中,点击“inner view”后,事件只冒泡到middle view后,就不再想上传递了。

互斥事件

自基础库版本 2.8.2 起,除 bindcatch 外,还可以使用 mut-bind 来绑定事件。一个 mut-bind 触发后,如果事件冒泡到其他节点上,其他节点上的 mut-bind 绑定函数不会被触发,但 bind 绑定函数和 catch 绑定函数依旧会被触发。

所有 mut-bind 是“互斥”的,只会有其中一个绑定函数被触发。同时,它完全不影响 bindcatch 的绑定效果。

请添加图片描述

上例中,点击“inner view”,只有middle和inner被触发了。outer没被触发是因为被middle的catch阻止了。exMut没被触发是因为mut-bind互斥。

请添加图片描述

请添加图片描述

事件阶段

事件支持两种阶段,冒泡和捕获。自基础库版本 1.5.0 起,触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前,且在捕获阶段中,事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时,可以采用capture-bindcapture-catch关键字,后者将中断捕获阶段和取消冒泡阶段。

请添加图片描述

上例中,点击inner view后,事件的触发顺序依次为touchstart2、touchstart4、 touchstart6、 touchstart5 、touchstart3、 touchstart1。

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

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

相关文章

使用cmake配置matplotlibcpp生成VS项目

https://gitee.com/feboreigns/matplotlibcpp 这篇文章需要一些cmake基础,python基础,visualstudio基础 准备环境 注意如果在VS平台使用必须要手动下载python,不能使用conda里面的,比如3.8版本,因为conda里面没有py…

Understanding Deep Image Representations by Inverting Them(2014)

文章目录 AbstractIntroductionContribution -Summary hh Abstract 从SIFT和视觉词袋到卷积神经网络(cnn),图像表示几乎是任何图像理解系统的关键组成部分。然而,我们对它们的了解仍然有限。在本文中,我们通过提出以下问题对表征中包含的视觉…

Mybatis行为配置之Ⅱ—结果相关配置项说明

专栏精选 引入Mybatis Mybatis的快速入门 Mybatis的增删改查扩展功能说明 mapper映射的参数和结果 Mybatis复杂类型的结果映射 Mybatis基于注解的结果映射 Mybatis枚举类型处理和类型处理器 再谈动态SQL 文章目录 专栏精选引言摘要正文autoMappingBehaviorautoMappingU…

关于设计模式、Java基础面试题

前言 之前为了准备面试,收集整理了一些面试题。 本篇文章更新时间2023年12月27日。 最新的内容可以看我的原文:https://www.yuque.com/wfzx/ninzck/cbf0cxkrr6s1kniv 设计模式 单例共有几种写法? 细分起来就有9种:懒汉&#x…

【中小型企业网络实战案例 四】配置OSPF动态路由协议

【中小型企业网络实战案例 三】配置DHCP动态分配地址-CSDN博客 【中小型企业网络实战案例 二】配置网络互连互通-CSDN博客 【中小型企业网络实战案例 一】规划、需求和基本配置_大小企业网络配置实例-CSDN博客 配置OSPF 由于内网互联使用的是静态路由,在链路出…

第八章 JPA和缓存

1.JPA 1.1.创建User实体类 public class User {private Integer uId;private String uName;private Integer uGender;private Integer uAge;private String uLoginname;private String uPassword;private Date uBirth;private String uEmail;private String uAddress; } 1.2…

走进电子技术之光敏电阻、电位器、开关

同学们大家好,今天我们继续学习杨欣的《电子设计从零开始》,这本书从基本原理出发,知识点遍及无线电通讯、仪器设计、三极管电路、集成电路、传感器、数字电路基础、单片机及应用实例,可以说是全面系统地介绍了电子设计所需的知识…

Redis 是如何执行的?

文章目录 命令执行流程步骤一:用户输入一条命令步骤二:客户端先将命令转换成 Redis 协议,然后再通过 socket 连接发送给服务器端步骤三:服务器端接收到命令步骤四:执行前准备步骤五:执行最终命令&#xff0…

牛客网SQL训练5—SQL大厂真题面试

文章目录 一、某音短视频1.各个视频的平均完播率2.平均播放进度大于60%的视频类别3.每类视频近一个月的转发量/率4.每个创作者每月的涨粉率及截止当前的总粉丝量5.国庆期间每类视频点赞量和转发量6.近一个月发布的视频中热度最高的top3视频 二、用户增长场景(某度信…

idea Spring Boot项目使用JPA创建与数据库链接

1.pom.xml文件中添加依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-jpa</artifactId></dependency><dependency><groupId>com.mysql</groupId><artifactId>…

文章智能改写伪原创方法技巧

哈喽&#xff0c;小伙伴们&#xff0c;大家好&#xff0c;我 又回来了。 今天给大家分享一个文章智能改写原创的方法&#xff0c;现在的自媒体平台&#xff0c;做视频流量挺不好做的&#xff0c;除非你有好的方法&#xff0c;文章呢&#xff0c;就相对比较容易点了&#xff0c;…

Graph Transformer2023最新研究成果汇总,附15篇必看论文

图Transformer是一种结合了Transformer模型和图神经网络&#xff08;GNN&#xff09;的框架&#xff0c;用于在图形结构数据上执行预测任务。在图Transformer中&#xff0c;Transformer的自注意力机制被用来学习节点之间的关系&#xff0c;而GNN则被用来生成节点的嵌入表示。通…

Qt学习:Qt的意义安装Qt

Qt 的简介 QT 是一个跨平台的 C图形用户界面应用程序框架。它为程序开发者提供图形界面所需的所有功能。它是完全面向对象的&#xff0c;很容易扩展&#xff0c;并且允许真正地组件编程。 支持平台 xP 、 Vista、Win7、win8、win2008、win10Windows . Unix/Linux: Ubuntu 等…

一、C++简介

C语言的发展史 1983年&#xff0c;贝尔实验室&#xff08;Bell Labs&#xff09;的Bjarne Stroustrup发明了C。 C在C语言的基础上进行了扩充和完善&#xff0c;是一种面向对象程序设计&#xff08;OOP&#xff09;语言。 Stroustrup说&#xff1a;“这个名字象征着源自于C语言变…

离线AI聊天清华大模型(ChatGLM3)本地搭建

在特定的情况下&#xff0c;要保证信息安全的同时还能享受到AIGC大模型带来的乐趣和功能&#xff0c;那么&#xff0c;离线部署就能帮助到你&#xff0c;最起码&#xff0c;它是一个真正可用的方案。 大模型本身清华的 (ChatGLM3)&#xff0c;为的是对中文支持友好&#xff0c…

爬虫基础一(持续更新)

爬虫概念&#xff1a; 通过编写程序&#xff0c;模拟浏览器上网&#xff0c;然后让其去互联网上抓取数据的过程 分类&#xff1a; 1&#xff0c;通用爬虫&#xff1a;抓取一整张页面数据 2&#xff0c;聚焦爬虫&#xff1a;抓取页面中的局部内容 3&#xff0c;增量式爬虫&…

NFC刷卡soc芯片SI3262集成刷卡+触摸+ACD超低功耗一体

简介 13.56mhz刷卡soc芯片SI3262集成刷卡触摸ACD超低功耗&#xff0c;ACD模式刷卡距离可达到5cm以上&#xff0c;非常适用于小体积门锁&#xff0c;密码锁&#xff0c;柜锁&#xff0c;接下来介绍一下这款芯片的具体功能。 优势 1.超低功耗&#xff0c;最低功耗达 1.7uA&…

【网络安全 | Misc】世安杯 适合作为桌面(Stegsolve及Winhex的使用)

正文 解压后得到图片&#xff1a; 图片属性正常&#xff0c;无特殊点&#xff0c;经测试&#xff0c;无隐写文件&#xff1a; Stegsolve 运行方法&#xff1a; 可以看到出现二维码&#xff1a; 对其解密得到&#xff1a; 03F30D0A79CB05586300000000000000000100000040000000…

【起草】【第六章】ChatGPT 在软件测试的应用场景

6.1 、引言 & 背景 在测试领域&#xff0c;AIGC 的爆发引发了对其在软件测试中的应用可能性的广泛研究和探讨。传统的软件测试方法往往需要大量的人力和时间投入&#xff0c;而 AIGC 技术的引入可能为测试领域带来革命性的变化。AIGC 在测试中的优势在于其高效的自动化能力…

R语言学习笔记-R包的安装

推荐在线安装&#xff0c;可以解决包与包之间的依赖关系。 1.首先在RGui&#xff1a; 2.在RStudio 的console下&#xff1a; 如安装ggplot2包&#xff0c;则&#xff1a; install.packages("ggplot2") 生信方面&#xff1a; 首先安装&#xff1a; install.packa…