微信小程序学习之路《五》 事件处理

微信小程序开发 - 事件处理

 

事件是试图层到逻辑层的通讯方式，用户通过对页面的操作，触发事件将操作的数据传输到逻辑层，逻辑层再通过数据绑定后响应到相应的页面。

 

本文讲述的是事件处理，数据绑定请参照：微信小程序学习之路《三》 数据绑定

 

 

事件

  

 事件种类

 

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

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

WXML的冒泡事件列表：

类型	触发条件
touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后马上离开
longtap	手指触摸后，超过350ms再离开

 

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

 

 

事件绑定

 

事件绑定的写法同组件的属性，以 key、value 的形式。

• key 以bind或catch开头，然后跟上事件的类型，如bindtap, catchtouchstart
• value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

 

如在下边这个例子中，点击 inner view 会先后触发handleTap3和handleTap2，点击 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>

 

 

事件对象

 

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

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

 

Page({

  tapName: function(event) {

    console.log(event)

  }

})