事件是用来打通逻辑层与视图层的枢纽, 我们一般在视图层 (WXML 文件) 对某个控件绑定事件函数, 在逻辑层 (JS 文件) 编写事件函数代码.
2.1 事件类型
小程序中有两类事件
1, 冒泡事件: 当一个组件的事件被触发时, 该事件会向父节点传递数据.
2, 非冒泡事件: 当一个组件上的事件被触发时, 该事件不会向父节点传输数据.
2.2 事件绑定
事件的绑定比较简单, 在视图层中增加类似如下代码, 事件通常有两种开头, 一种时 bind 以他开头代表普通模式; 另一种是 catch 开头, 他会阻止冒泡事件冒泡. 初期只需要用 bind 模式即可
<view bindtap="viewTap"> click me </view>
上述代码中 bindtap 代表点击事件, 他所触发的函数为 viewTap, 所以我们在逻辑层编写 viewTap 函数即可.
如下所示:
- Page({
- viewTap: function(e) {
- console.log('view tap')
- }
- })
定义一个函数 viewTap, 入口参数为 e, 此对象会携带一些数据, 可以供我们操作使用.
2.3 事件对象
函数 viewTap, 入口参数为 e, 此对象会携带一些数据, 可以供我们操作使用.
1,type 事件类型
e.type 事件类型, tap 类型或者其他类型
2,timeStamp 触发时间
3,target 触发源
e.target.id 得到触发源组件的 id
e.target.offsetLeft 组件坐标的偏移量
e.target.offsetTop 组件坐标的偏移量
e.target.dataset.org 获取 data 开头的数据, 在控件中我们可以定义 data 开头的变量参数
例如
<view data-org = "test" bindtap = "tap1">
如上代码视图层定义了 data-org 参数, 则可以在逻辑层通过 e.target.dataset.org 获取其值.
4,detail
detail 会对应一些表单输入
5,touch 属性
pageX pageY 文档触摸点偏移量
screenX screenY 屏幕偏移量
来源: http://www.bubuko.com/infodetail-2768498.html