微信小程序 事件系统

事件

什么是事件

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

 

事件的使用方式

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

  <button id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </button>
  

   

  • 在相应的Page定义中写上相应的事件处理函数，参数是event。
  • Page({ tapName: function(event) { console.log(event) } })

  使用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. 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。

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

  touchstart，

  手指触摸动作开始