小程序WXML之事件

心已赠人 2023-10-17 09:04 150阅读 0赞

**事件的定义**

在程序中都有事件这一概念，微信小程序中对事件的定义主要有以下几点：

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

### 事件的使用方式 ###

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

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

test.wxml

![Center][]

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

test.js

![Center 1][]

3.点击“点击”后响应的log日志如图：

![Center 2][]

### 事件详解 ###

#### 事件分类 ####

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

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

WXML的冒泡事件列表：

<table> 
 <thead> 
  <tr> 
   <th><span style="font-size:14px">类型</span></th> 
   <th><span style="font-size:14px">触发条件</span></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><span style="font-size:14px">touchstart</span></td> 
   <td><span style="font-size:14px">手指触摸</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px">touchmove</span></td> 
   <td><span style="font-size:14px">手指触摸后移动</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px">touchcancel</span></td> 
   <td><span style="font-size:14px">手指触摸动作被打断，如来电提醒，弹窗</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px">touchend</span></td> 
   <td><span style="font-size:14px">手指触摸动作结束</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px">tap</span></td> 
   <td><span style="font-size:14px">手指触摸后离开</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px">longtap</span></td> 
   <td><span style="font-size:14px">手指触摸后，超过350ms再离开</span></td> 
  </tr> 
 </tbody> 
</table>

**注：除上表之外的其他组件自定义事件都是非冒泡事件，如[`<form/>`][form]的`submit`事件，[`<input/>`][input]的`input`事件，[`<scroll-view/>`][scroll-view]的`scroll`事件，(详见各个[组件][Link 1])**

### 事件绑定 ###

--------------------

事件绑定的写法同组件的属性，以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>

### 事件对象 ###

--------------------

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

**事件对象的属性列表：**

<table> 
 <thead> 
  <tr> 
   <th><span style="font-size:14px">属性</span></th> 
   <th><span style="font-size:14px">类型</span></th> 
   <th><span style="font-size:14px">说明</span></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><span style="font-size:14px"><a href="http://www.w3cschool.cn/weixinapp/weixinapp-event.html#type" rel="nofollow">type</a></span></td> 
   <td><span style="font-size:14px">String</span></td> 
   <td><span style="font-size:14px">事件类型</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px"><a href="http://www.w3cschool.cn/weixinapp/weixinapp-event.html#timeStamp" rel="nofollow">timeStamp</a></span></td> 
   <td><span style="font-size:14px">Integer</span></td> 
   <td><span style="font-size:14px">事件生成时的时间戳</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px"><a href="http://www.w3cschool.cn/weixinapp/weixinapp-event.html#target" rel="nofollow">target</a></span></td> 
   <td><span style="font-size:14px">Object</span></td> 
   <td><span style="font-size:14px">触发事件的组件的一些属性值集合</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px"><a href="http://www.w3cschool.cn/weixinapp/weixinapp-event.html#currenttarget" rel="nofollow">currentTarget</a></span></td> 
   <td><span style="font-size:14px">Object</span></td> 
   <td><span style="font-size:14px">当前组件的一些属性值集合</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px"><a href="http://www.w3cschool.cn/weixinapp/weixinapp-event.html#touches" rel="nofollow">touches</a></span></td> 
   <td><span style="font-size:14px">Array</span></td> 
   <td><span style="font-size:14px">触摸事件，触摸点信息的数组</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px"><a href="http://www.w3cschool.cn/weixinapp/weixinapp-event.html#detail" rel="nofollow">detail</a></span></td> 
   <td><span style="font-size:14px">Object</span></td> 
   <td><span style="font-size:14px">额外的信息</span></td> 
  </tr> 
 </tbody> 
</table>

### type ###

--------------------

##### 通用事件类型 #####

### timeStamp ###

--------------------

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

### target ###

--------------------

触发事件的源组件。

<table> 
 <thead> 
  <tr> 
   <th><span style="font-size:14px">属性</span></th> 
   <th><span style="font-size:14px">说明</span></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><span style="font-size:14px">id</span></td> 
   <td><span style="font-size:14px">事件源组件的id</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px"><a href="http://www.w3cschool.cn/weixinapp/weixinapp-event.html#dataset" rel="nofollow">dataset</a></span></td> 
   <td><span style="font-size:14px">事件源组件上由<code>data-</code>开头的自定义属性组成的集合</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px">offsetLeft, offsetTop</span></td> 
   <td><span style="font-size:14px">事件源组件的坐标系统中偏移量</span></td> 
  </tr> 
 </tbody> 
</table>

### currentTarget ###

--------------------

事件绑定的当前组件。

<table> 
 <thead> 
  <tr> 
   <th><span style="font-size:14px">属性</span></th> 
   <th><span style="font-size:14px">说明</span></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><span style="font-size:14px">id</span></td> 
   <td><span style="font-size:14px">当前组件的id</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px"><a href="http://www.w3cschool.cn/weixinapp/weixinapp-event.html#dataset" rel="nofollow">dataset</a></span></td> 
   <td><span style="font-size:14px">当前组件上由<code>data-</code>开头的自定义属性组成的集合</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px">offsetLeft, offsetTop</span></td> 
   <td><span style="font-size:14px">当前组件的坐标系统中偏移量</span></td> 
  </tr> 
 </tbody> 
</table>

**说明: 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是一个触摸点的数组，每个触摸点包括以下属性：

<table> 
 <thead> 
  <tr> 
   <th><span style="font-size:14px">属性</span></th> 
   <th><span style="font-size:14px">说明</span></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><span style="font-size:14px">pageX,pageY</span></td> 
   <td><span style="font-size:14px">距离文档左上角的距离，文档的左上角为原点 ，横向为X轴，纵向为Y轴</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px">clientX,clientY</span></td> 
   <td><span style="font-size:14px">距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴</span></td> 
  </tr> 
  <tr> 
   <td><span style="font-size:14px">screenX,screenY</span></td> 
   <td><span style="font-size:14px">距离屏幕左上角的距离，屏幕左上角为原点，横向为X轴，纵向为Y轴</span></td> 
  </tr> 
 </tbody> 
</table>

### detail ###

--------------------

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

`最后希望各位客官老爷门给我一个继续写这个小程序技术贴的动力，也希望大家共同进步，帅气的客官可以扫一下下面的二维码给我捐点码字的银子，谢谢！！！`

![Center 3][]

[Center]: https://img-blog.csdn.net/20161021135922232?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: https://img-blog.csdn.net/20161021140051265?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 2]: https://img-blog.csdn.net/20161021140301237?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[form]: http://www.w3cschool.cn/weixinapp/m8x71q8z.html
[input]: http://www.w3cschool.cn/weixinapp/3glu1q92.html
[scroll-view]: http://www.w3cschool.cn/weixinapp/weixinapp-scroll-view.html
[Link 1]: http://www.w3cschool.cn/weixinapp/itz51q8o.html
[Center 3]: https://img-blog.csdn.net/20161021141114214?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center