微信小程序开发系列-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。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C实现数组奇数在前偶数在后排序

一、运行结果&#xff1b; 二、源码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>//实现调整函数move_odd_even函数&#xff1b; void move_odd_even(int arr[], int sz) {//初始化变量值&#xff1b;int left 0;int right sz - 1;//循环判断和…

Arduino开发实例-ADS1232高精度24位ADC数据采样

ADS1232高精度24位ADC数据采样 文章目录 ADS1232高精度24位ADC数据采样1、ADS1232介绍2、硬件准备及接线3、驱动实现1、ADS1232介绍 几乎所有的微控制器都带有 ADC 引脚,但它们缺乏高精度。 在很多项目中,需要对模拟量进行高精度的测量,或者被测信号的电压电平不在单片机的…

2022年全国职业院校技能大赛高职组云计算正式赛卷第三场-公有云

2022 年全国职业院校技能大赛高职组云计算赛项试卷 【赛程名称】云计算赛项第三场-公有云 目录 2022 年全国职业院校技能大赛高职组云计算赛项试卷 【赛程名称】云计算赛项第三场-公有云 【任务 1】公有云服务搭建[10 分] 【任务 2】公有云服务运维[10 分] 【任务 3】公有云运维…

【我与Java的成长记】之this引用和构造方法的使用详解

系列文章目录 能看懂文字就能明白系列 C语言笔记传送门 &#x1f31f; 个人主页&#xff1a;古德猫宁- &#x1f308; 信念如阳光&#xff0c;照亮前行的每一步 文章目录 系列文章目录&#x1f308; *信念如阳光&#xff0c;照亮前行的每一步* 前言一、this的使用this引用的特…

机器学习之人工神经网络(Artificial Neural Networks,ANN)

人工神经网络(Artificial Neural Networks,ANN)是机器学习中的一种模型,灵感来源于人脑的神经网络结构。它由神经元(或称为节点)构成的层级结构组成,每个神经元接收输入并生成输出,这些输入和输出通过权重进行连接。 人工神经网络(ANN)是一种模仿生物神经系统构建的…

动态规划08--一和零

题目描述 给你一个二进制字符串数组 strs 和两个整数 m 和 n 。 请你找出并返回 strs 的最大子集的大小&#xff0c;该子集中 最多 有 m 个 0 和 n 个 1 。 如果 x 的所有元素也是 y 的元素&#xff0c;集合 x 是集合 y 的 子集 。 思路分析 做到这道题的时候没什么思路&a…

LSTM Siamese neural network

本文中的代码在Github仓库或Gitee仓库中可找到。 Hi, 你好。我是茶桁。 大家是否还记得&#xff0c;在「核心基础」课程中&#xff0c;我们讲过CNN以及LSTM。 卷积神经网络&#xff08;CNN&#xff09;已经在计算机视觉处理中得到广泛应用&#xff0c;不过&#xff0c;2017年…

数字化工业中的低功耗蓝牙模块:实现智能制造的关键

在数字化工业的时代&#xff0c;智能制造成为推动产业升级的关键因素之一。低功耗蓝牙模块作为数字化工业的技术支持&#xff0c;为设备之间的高效通信和数据交换提供了理想的解决方案。本文将深入探讨低功耗蓝牙模块在数字化工业中的关键作用&#xff0c;以及其如何实现智能制…

德鲁伊(Druid)链接PGsql前端请求或者后端自动任务频繁出现IOException

尝试在druid配置文件中增加&#xff1a; socket-timeout: 60000 druid一些版本默认会给链接数据库socket默认10s&#xff0c;超出10s之后socket断开&#xff0c;对于GP数据库报的个IO异常。 &#xff08;对于同样的场景mysql超出10s后提示的是socketTimeOut&#xff0c;所以相…

别再写一堆的 for 循环了!Java 8 中的 Stream 轻松遍历树形结构,是真的牛逼!

可能平常会遇到一些需求&#xff0c;比如构建菜单&#xff0c;构建树形结构&#xff0c;数据库一般就使用父id来表示&#xff0c;为了降低数据库的查询压力&#xff0c;我们可以使用Java8中的Stream流一次性把数据查出来&#xff0c;然后通过流式处理。 我们一起来看看&#x…

三维可视化智慧工地源码,数字孪生可视化大屏,微服务架构+Java+Spring Cloud +UniApp +MySql

源码技术说明 微服务架构JavaSpring Cloud UniApp MySql&#xff1b;支持多端展示&#xff08;PC端、手机端、平板端&#xff09;;数字孪生可视化大屏&#xff0c;一张图掌握项目整体情况;使用轻量化模型&#xff0c;部署三维可视化管理&#xff0c;与一线生产过程相融合&#…

模糊-神经网络控制 原理与工程应用(绪论)

模糊—神经网络控制原理与工程应用 绪论 模糊和确定系统 在客观世界中&#xff0c;系统可分为确定性系统和模糊性系统&#xff0c;前者可用精确数学模型加以描述&#xff0c;而后者则不能。 输入输出类型 &#xff08;&#xff42;&#xff09;的模糊性输出可通过反模糊化转换…

每周一算法:区间覆盖

问题描述 给定 N N N个闭区间 [ a i , b i ] [a_i,b_i] [ai​,bi​]&#xff0c;以及一个线段区间 [ s , t ] [s,t] [s,t]&#xff0c;请你选择尽量少的区间&#xff0c;将指定线段区间完全覆盖。 输出最少区间数&#xff0c;如果无法完全覆盖则输出 − 1 -1 −1。 输入格式…

【Linux】Linux服务器ssh密钥登录

ssh密码登录 ssh root地址 #需要输入密码ssh密钥登录 Linux之间密钥登录 生成公私钥 #生成公钥私钥 ssh-keygen #默认目录&#xff0c;默认密码空ssh-copy-id #拷贝ID到目标服务器 ssh-copy-id -i id_rsa.pub root192.168.8.22 ssh-copy-id -i id_rsa.pub root192.168.8.33…

安卓无法下载gradle或者下载gradle只有几十k的时候怎么办

简单说明&#xff1a;检查项目根目录的build.gradle文件&#xff0c;新版本的检查setting.gradle文件&#xff0c;看看repositories中有没有mavenCentral()&#xff0c;没有的话&#xff0c;加上&#xff0c;放在前面&#xff0c;把阿里的镜像也放上maven { url ‘https://mave…

linux ARM64 异常

linux 的系统调用是通过指令陷入不同异常级别实现的。arm64 架构的 cpu 的异常级别结构如下&#xff1a; 在上图中&#xff0c;用户层运行在 EL0 也就是异常级别 0&#xff0c;Linux 内核运行在 EL1 也就是异常级别 1&#xff0c;安全可信操 作系统运行在异常级别 2&#xff1a…

k8s的二进制部署和网络类型

k8s的二进制部署 master01&#xff1a;192.168.233.10 kube-apiserver kube-controller-manager kube-scheduler etcd master02&#xff1a;192.168.233.20 kube-apiserver kube-controller-manager kube-scheduler node01&#xff1a;192.168.233.30 kubelet kube-proxy etc…

【数据结构】C语言实现单链表的基本操作

单链表基本操作的实现 导言一、查找操作1.1 按位查找1.1.1 按位查找的C语言实现1.1.2 按位查找的时间复杂度 1.2 按值查找1.2.1 按值查找的C语言实现1.2.2 按值查找的时间复杂度 二、插入操作2.1 后插操作2.2 前插操作 三、删除操作结语 导言 大家好&#xff0c;很高兴又和大家…

10 分钟了解 nextTick ,并实现简易版的 nextTick

前言 在 Vue.js 中&#xff0c;有一个特殊的方法 nextTick&#xff0c;它在 DOM 更新后执行一段代码&#xff0c;起到等待 DOM 绘制完成的作用。本文会详细介绍 nextTick 的原理和使用方法&#xff0c;并实现一个简易版的 nextTick&#xff0c;加深对它的理解。 一. 什么是 n…

深入浅出图解C#堆与栈 C# Heap(ing) VS Stack(ing) 第一节 理解堆与栈

深入浅出图解C#堆与栈 C# HeapingVS Stacking第一节 理解堆与栈 [深入浅出图解C#堆与栈 C# Heap(ing) VS Stack(ing) 第一节 理解堆与栈](https://mp.csdn.net/mdeditor/101021023)[深入浅出图解C#堆与栈 C# Heap(ing) VS Stack(ing) 第二节 栈基本工作原理](https://mp.csdn.n…