微信小程序事件的使用

事件的使用方式

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

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

 <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName" wx:key="*this">
  <view>
	{{idx}}:{{itemName}}
	<button data-index="{{idx}}" data-aa="{{itemName}}" bindtap="del">删除</button>
	</view>
 </view>

2）在相应的Page定义中写上相应的事件处理函数，参数是event (e)

2）点击我们的按钮即会打印出我们刚才所传的值： 

可以看到log出来的信息大致如下： 

使用WXS函数响应事件

从基础库版本2.4.4开始，支持使用WXS函数绑定事件，WXS函数接受2个参数，第一个是event，在原有的event的基础上加了event.instance对象，第二个参数是ownerInstance，和event.instance一样是一个ComponentDescriptor对象。具体使用如下：

• 在组件中绑定和注册事件处理的WXS函数。

<wxs module="wxs" src="./test.wxs"></wxs>
<view id="tapTest" data-hi="WeChat" bindtap="{{wxs.tapName}}"> Click me! </view>
**注：绑定的WXS函数必须用{{}}括起来**

• test.wxs文件实现tapName函数

function tapName(event, ownerInstance) {
  console.log('tap wechat', JSON.stringify(event))
}
module.exports = {
  tapName: tapName
}

ownerInstance包含了一些方法，可以设置组件的样式和class，具体包含的方法以及为什么要用WXS函数响应事件，请点击查看详情。

事件详解

事件分类

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

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

 

注：除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如 form 的submit事件，input 的input事件，scroll-view 的scroll事件，(详见各个组件)

 

事件对象

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

 

如需了解更多，可查看文档：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html