微信小程序学习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的数组]}