微信小程序学习Course 2 事件

Posted 2021-01-06 #Cloud

微信小程序学习Course 2 事件

事件是用来打通逻辑层与视图层的枢纽，我们一般在视图层（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 屏幕偏移量