微信小程序 教程之事件


Posted in Javascript onOctober 18, 2016

系列文章:

什么是事件

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

事件的使用方式

在组件中绑定一个事件处理函数。

如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

<view id="tapTest" data-hi="MINA" bindtap="tapName"> Click me! </view>

在相应的Page定义中写上相应的事件处理函数,参数是event。

Page({
 tapName: function(event) {
 console.log(event)
 }
})

可以看到log出来的信息大致如下

{
"type": "tap",
"timeStamp": 1252,
"target": {
 "id": "tapTest",
 "offsetLeft": 0,
 "offsetTop": 0,
 "dataset": {
 "hi": "MINA"
 }
},
"currentTarget": {
 "id": "tapTest",
 "offsetLeft": 0,
 "offsetTop": 0,
 "dataset": {
 "hi": "MINA"
 }
},
"touches": [{
 "pageX": 30,
 "pageY": 12,
 "clientX": 30,
 "clientY": 12,
 "screenX": 112,
 "screenY": 151
}],
"detail": {
 "x": 30,
 "y": 12
}
}

事件详解

事件分类

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

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

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

WXML的冒泡事件列表:

类型 触发条件
touchstart 手指触摸
touchmove 手指触摸后移动
touchcancel 手指触摸动作被打断,如来电提醒,弹窗
touchend 手指触摸动作结束
tap 手指触摸后离开
longtap 手指触摸后,超过350ms再离开

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

事件绑定

事件绑定的写法同组件的属性,以key、value的形式。

key以bind或catch开头,然后跟上事件的类型,如bindtap, catchtouchstart

value是一个字符串,需要在对应的Page中定义同名的函数。不然当触发事件的时候会报错。

bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。

如在下边这个例子中,点击inner view会先后触发handleTap1和handleTap2(因为tap事件会冒泡到middle view,而middle view阻止了tap事件冒泡,不再向父节点传递),点击middle view会触发handleTap2,点击outter view会触发handleTap1。

<view id="outter" bindtap="handleTap1">
 outer view
 <view id="middle" catchtap="handleTap2">
 middle view
 <view id="inner" bindtap="handleTap3">
  inner view
 </view>
 </view>
</view>

事件对象

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

事件对象的属性列表:

属性 类型 说明
type String 事件类型
timeStamp Integer 事件生成时的时间戳
target Object 触发事件的组件的一些属性值集合
currentTarget Object 当前组件的一些属性值集合
touches Array 触摸事件,触摸点信息的数组
detail Object 额外的信息

通用事件类型

timeStamp

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

target

触发事件的源组件。

属性 说明
id 事件源组件的id
dataset 事件源组件上由data-开头的自定义属性组成的集合
offsetLeft, offsetTop 事件源组件的坐标系统中偏移量

currentTarget

事件绑定的当前组件。

属性 说明
id 当前组件的id
dataset 当前组件上由data-开头的自定义属性组成的集合
offsetLeft, offsetTop 当前组件的坐标系统中偏移量

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

dataset

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

示例:

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

Page({
 bindViewTap:function(event){
 event.target.dataset.alphaBeta == 1 // - 会转为驼峰写法
 event.target.dataset.alphabeta == 2 // 大写会转为小写
 }
})

touches

touches是一个触摸点的数组,每个触摸点包括以下属性:

属性 说明
pageX,pageY 距离文档左上角的距离,文档的左上角为原点 ,横向为X轴,纵向为Y轴
clientX,clientY 距离页面可显示区域(屏幕除去导航条)左上角距离,横向为X轴,纵向为Y轴
screenX,screenY 距离屏幕左上角的距离,屏幕左上角为原点,横向为X轴,纵向为Y轴

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

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
prototype与jquery下Ajax实现的差别
Sep 13 Javascript
JQuery Tips(4) 一些关于提高JQuery性能的Tips
Dec 19 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
JavaScript中的闭包
Feb 24 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
Mar 25 Javascript
javascript运算符——位运算符全面介绍
Jul 14 Javascript
AngularJS入门教程之模块化操作用法示例
Nov 02 Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 Javascript
vue项目前端埋点的实现
Mar 06 Javascript
Vue.js自定义指令学习使用详解
Oct 19 Javascript
js删除指定位置超链接中含有百度与360的标题
Jan 06 Javascript
浅谈Vue的computed计算属性
Mar 21 Vue.js
微信小程序 教程之模板
Oct 18 #Javascript
微信小程序 教程之列表渲染
Oct 18 #Javascript
微信小程序 教程之条件渲染
Oct 18 #Javascript
微信小程序 教程之数据绑定
Oct 18 #Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 #Javascript
微信小程序 教程之WXML
Oct 18 #Javascript
原生JS实现匀速图片轮播动画
Oct 18 #Javascript
You might like
php时间戳转换的示例
2014/03/31 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
php与python实现的线程池多线程爬虫功能示例
2016/10/12 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
PHP如何搭建百度Ueditor富文本编辑器
2018/09/21 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
Laravel 实现Eloquent模型分组查询并返回每个分组的数量 groupBy()
2019/10/23 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
javascript indexOf函数使用说明
2008/07/03 Javascript
JQuery 选项卡效果(JS与HTML的分离)
2010/04/01 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
2016/05/27 Javascript
详解开源的JavaScript插件化框架MinimaJS
2017/10/26 Javascript
vue移动端实现下拉刷新
2018/04/22 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
2018/11/23 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
Python中的高级数据结构详解
2015/03/27 Python
python的exec、eval使用分析
2017/12/11 Python
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
详解pandas安装若干异常及解决方案总结
2019/01/10 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
水务局局长岗位职责
2013/11/28 职场文书
初中教师业务学习材料
2014/05/12 职场文书
初中数学教学随笔
2015/08/15 职场文书
解决MultipartFile.transferTo(dest) 报FileNotFoundExcep的问题
2021/07/01 Java/Android
python中redis包操作数据库的教程
2022/04/19 Python