小程序学习---事件(二)

简介: 一、事件对象 如无特殊说明,当组件触发事件时,逻辑层绑定该事件的处理函数会收到一个事件对象。 1、BaseEvent 基础事件对象属性列表: 属性 类型 ...

一、事件对象

如无特殊说明,当组件触发事件时,逻辑层绑定该事件的处理函数会收到一个事件对象。

1BaseEvent 基础事件对象属性列表:

属性

类型

说明

type

String

事件类型

timeStamp

Integer

事件生成时的时间戳

target

Object

触发事件的组件的一些属性值集合

currentTarget

Object

当前组件的一些属性值集合

 

2CustomEvent 自定义事件对象属性列表(继承 BaseEvent):

属性

类型

说明

detail

Object

额外的信息

 

3TouchEvent 触摸事件对象属性列表(继承 BaseEvent):

属性

类型

说明

touches

Array

触摸事件,当前停留在屏幕中的触摸点信息的数组

changedTouches

Array

触摸事件,当前变化的触摸点信息的数组

特殊事件: 中的触摸事件不可冒泡,所以没有 currentTarget。



二、事件类型详解

1type

代表事件的类型。

2timeStamp

页面打开到触发事件所经过的毫秒数。

3target

触发事件的源组件。

属性

类型

说明

id

String

事件源组件的id

tagName

String

当前组件的类型

dataset

Object

事件源组件上由data-开头的自定义属性组成的集合

4currentTarget

事件绑定的当前组件。

属性

类型

说明

id

String

事件源组件的id

tagName

String

当前组件的类型

dataset

Object

事件源组件上由data-开头的自定义属性组成的集合

说明: target currentTarget 可以参考上例中,点击 inner view 时,handleTap3 收到的事件对象 target currentTarget 都是 inner,而 handleTap2 收到的事件对象 target 就是 innercurrentTarget 就是 middle

5dataset

在组件中可以定义数据,这些数据将会通过事件传递给 SERVICE。 书写方式: 以data-开头,多个单词由连字符-链接,不能有大写(大写会自动转成小写)如data-element-type,最终在 event.currentTarget.dataset 中会将连字符转成驼峰elementType。


点击(此处)折叠或打开

  1. view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test /view>

  2. Page({
  3.   bindViewTap:function(event){
  4.     event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
  5.     event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
  6.   }
  7. })


6touches

touches 是一个数组,每个元素为一个 Touch 对象(canvas 触摸事件中携带的 touches CanvasTouch 数组)。 表示当前停留在屏幕上的触摸点。

7Touch 对象

属性

类型

说明

identifier

Number

触摸点的标识符

pageX, pageY

Number

距离文档左上角的距离,文档的左上角为原点 ,横向为X轴,纵向为Y

clientX, clientY

Number

距离页面可显示区域(屏幕除去导航条)左上角距离,横向为X轴,纵向为Y

8CanvasTouch 对象

属性

类型

说明

identifier

Number

触摸点的标识符

x, y

Number

距离 Canvas 左上角的距离,Canvas 的左上角为原点 ,横向为X轴,纵向为Y

9changedTouches

changedTouches 数据格式同 touches。 表示有变化的触摸点,如从无变有(touchstart),位置变化(touchmove),从有变无(touchendtouchcancel)。

10detail

自定义事件所携带的数据,如表单组件的提交事件会携带用户的输入,媒体的错误事件会携带错误信息,详见组件定义中各个事件的定义。

点击事件的detail 带有的 x, y pageX, pageY 代表距离文档左上角的距离。

相关文章
|
5月前
|
小程序 API 数据库
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
85 0
|
3月前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
3月前
|
小程序 JavaScript
微信小程序学习之数据绑定,事件绑定,事件传参与数据同步的学习记录
本文介绍了微信小程序中的数据绑定、事件绑定、事件传参与数据同步的基本概念和使用方法,包括如何在data对象中定义数据、使用mustache语法在wxml中渲染数据、绑定和处理事件、事件对象属性、事件传参以及实现输入框与data数据的同步。
微信小程序学习之数据绑定,事件绑定,事件传参与数据同步的学习记录
|
4月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
115 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
3月前
|
JSON 小程序 JavaScript
微信小程序页面事件,下拉刷新事件和上拉触底事件
这篇文章介绍了微信小程序中如何实现下拉刷新和上拉触底事件,包括开启下拉刷新、配置下拉刷新样式、监听下拉刷新事件,以及监听上拉触底事件和配置上拉触底的距离。
|
4月前
|
小程序
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会
这篇文章是作者关于学习微信小程序开发并在一周内成功开发出一个商城项目系统的心得体会,分享了学习基础知识、实战项目开发的过程,以及小程序开发的易上手性和开发周期的简短。
关于我花了一个星期学习微信小程序开发、并且成功开发出一个商城项目系统的心得体会
|
6月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的高校学习助手小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的高校学习助手小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生党务学习平台小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生党务学习平台小程序附带文章源码部署视频讲解等
32 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的英语学习交流平台小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的英语学习交流平台小程序附带文章源码部署视频讲解等
47 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的学习资源推送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的学习资源推送系统附带文章源码部署视频讲解等
47 0