首页 > 编程语言 >事件系统-小程序

事件系统-小程序

时间:2024-08-17 21:56:08浏览次数:15  
标签:定义数据 程序 绑定 系统 点击 事件 bind 冒泡

事件绑定和事件对象

小程序绑定事件和在网页开发中绑定事件几乎一致,只不过小程序不能通过on绑定事件,也没有click等事件,小程序中绑定事件使用bind方法,click也需要使用tap事件来进行代替,绑定事件的两种方式:

  • 第一种:bind:事件名,bind后面需要跟上冒号,冒号后面跟上事件名,例如:<view bind:tap="fName:></view>
  • 第二种方式:bind事件名,bind后面直接跟事件名,例如:<view bindtap="fName:></view>

事件处理函数需要写到.js文件中,在.js文件中需要调用小程序提供的page方法来注册小程序的页面,我们可以直接在page方法中创建事件处理函数。

 

点击页面查看日志输出

在小程序中,inout输入框没有边框,需要自己添加样式

在app.scss中添加样式

事件分类以及阻止事件发生

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

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

使用bind绑定的事件,会触发事件冒泡,如果想阻止事件冒泡,可以使用catch来绑定事件。

点击按钮可以看到冒泡事件的发生

阻止事件冒泡将bind:tap改为catch:tap即可

事件传参-data-自定义数据

在触发事件时将一些数据作为参数传递给事件处理函数的过程

小程序中在组件上通过data-*的方式定义需要传递的数据,其中*就是自定义的属性,例如:<view data-id="100" bindtap="handler"/>, 然后通过事件对象继续宁获取自定义数据。

 

查看控制台

在view上绑定事件

点击蓝色区域,不点击按钮,事件触发者和事件绑定者都是view

点击按钮,不点击蓝色区域,

//currentTarget事件绑定者:view

  //target事件触发者:按钮

注意事项1

//在传递参数时,如果自定义属性是多个单词,单词与单词直接使用-进行连接

//在事件对象中会被转换成为小驼峰写法

注意事项2

事件传参-mark自定义数据

小程序除了用data-*传参外,还可以用mark标记传递参数

mark是一种自定义属性,可以在组件上添加,用于来识别具体触发事件的target节点。同时mark还可以用于承载一些自定义数据

在组件上使用mark:自定义属性的方式将数据传递给事件处理函数,例如:<view mark:id"100" bnindtap="handler"/>然后通过事件对象进行自定义数据

view绑定事件

先点击蓝色区域

先点击按钮

标签:定义数据,程序,绑定,系统,点击,事件,bind,冒泡
From: https://blog.csdn.net/2201_75709573/article/details/141105755

相关文章

  • 图像边缘提取系统设计
    一、设计依据在掌握数字图像处理基本算法的基础上,利用MATLAB、VC++、Python等编程语言设计具有指定功能的图形用户界面。 二、设计内容1、设计一个实现图像边缘提取功能的界面2、界面可以采用MATLAB等编程语言设计3、要求界面能够读入并显示图片,通过各种控件选择并进......
  • MATLAB基于深度学习的车辆检测系统
      如今机器视觉领域深度学习算法已经大行其道,也让人工智能的实现不再那么遥不可及,但是在目标检测领域,让计算机超越人类还需让更多的人参与进来继续努力。如今众多的高校,甚至中小学已经将人工智能纳入了学习科目,这确实能让人感受到AI的魅力以及社会对其重视程度。印象中玩深......
  • 基于MATLAB的人民币识别系统
    一、课题介绍    本设计为基于MATLAB的人民币识别系统。带有一个GUI界面。先利用radon进行倾斜校正,根据不同纸币,选择不同维度的参数识别纸币金额,有通过RGB分量识别100元;通过面额图像的宽度识别1元、5元;通过构建矩形结构体识别10元;通过RGB分量识别20元与50元。运行G......
  • 原生微信小程序笔记完整总结4.0
       ......
  • C#委托、事件、多播
    委托:什么是委托: 委托是用户自定义类型,这一点和类,接口等一样的。委托是引用类型。委托指向一系列具有相同签名和返回类型的方法的地址。调用委托的时候,它所包含的所有方法都会被执行。可以理解为用来存储方法,委托就是用来存储方法的一种解决方案。现实中:张三委托李四去做......
  • python-flask计算机毕业设计学生健康管理系统(程序+开题+论文)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着教育事业的蓬勃发展,学生群体的健康问题日益受到社会各界的广泛关注。传统的学生健康管理模式往往依赖于定期的体检和简单的健康记录,缺......
  • python-flask计算机毕业设计忻州师院新生入学报到管理系统(程序+开题+论文)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着信息技术的飞速发展,高校管理工作日益趋向于数字化、智能化。忻州师范学院作为一所充满活力的高等教育机构,每年迎来大量新生入学,传统的......
  • python-flask计算机毕业设计虚位以待车位共享小程序(程序+开题+论文)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着城市化进程的加速,私家车数量急剧增加,而城市停车资源有限,导致停车难成为困扰城市居民的一大难题。尤其是在商业中心、医院、学校等人流......
  • 基于ssm框架的博客系统(10797)
     有需要的同学,源代码和配套文档领取,加文章最下方的名片哦一、项目演示项目演示视频二、资料介绍完整源代码(前后端源代码+SQL脚本)配套文档(LW+PPT+开题报告)远程调试控屏包运行三、技术介绍Java语言SSM框架SpringBoot框架Vue框架JSP页面Mysql数据库IDEA/Eclipse开发四、项......
  • JSP基于JAVAWEB医院挂号系统jep98(程序+源码+数据库+调试部署+开发环境)
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表系统功能:用户,医生,护士,科室信息,预约时间段,出诊信息,预约挂号,门诊病历,医生打卡,护士打卡,就诊评价技术要求:开发语言:JSP前端使用:HTML5,CSS,JSP动态网页技......