微信小程序学习Course 4 事件
微信小程序学习Course 4 事件
事件是用来打通逻辑层与视图层的枢纽,我们一般在视图层(WXML文件)对某个控件绑定事件函数,在逻辑层(JS文件)编写事件函数代码。
4.1 事件类型
小程序中有两类事件
1、冒泡事件:当一个组件的事件被触发时,该事件会向父节点传递数据。
2、非冒泡事件:当一个组件上的事件被触发时,该事件不会向父节点传输数据。
4.2 事件绑定
事件的绑定比较简单,在视图层中增加类似如下代码,事件通常有两种开头,一种时bind以他开头代表普通模式;另一种是catch开头,他会阻止冒泡事件冒泡。初期只需要用bind模式即可
<view bindtap="viewTap"> click me </view>
上述代码中bindtap代表点击事件,他所触发的函数为viewTap,所以我们在逻辑层编写viewTap函数即可。
如下所示:
Page({
viewTap: function(e) {
console.log('view tap')
}
})
定义一个函数viewTap,入口参数为e,此对象会携带一些数据,可以供我们操作使用。
4.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 屏幕偏移量
4.4 常见事件
事件 | 解释 |
tap | 手指触摸后马上离开,相当于点击一下 |
longpress | 手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发 |
touchstart | 手指触摸动作开始 |
touchmove | 手指触摸后移动 |
touchcancel | 手指触摸动作被打断,如来电提醒,弹窗 |
在一些特殊控件也有自己特殊的事件
1、input
事件 | 解释 |
bindinput | 键盘输入时触发,event.detail = {value, cursor, keyCode},keyCode 为键值,2.1.0 起支持,处理函数可以直接 return 一个字符串,将替换输入框的内容。 |
bindfocus | 输入框聚焦时触发,event.detail = { value, height },height 为键盘高度,在基础库 1.9.90 起支持 |
bindblur | 输入框失去焦点时触发,event.detail = {value: value} |
bindconfirm | 点击完成按钮时触发,event.detail = {value: value} |
2、CheckBox复选框
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
bindchange | EventHandle | <checkbox-group/> 中选中项发生改变是触发 change 事件,detail = {value:[选中的checkbox的value的数组]} |