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

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

 

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

 

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

 

 

事件


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

 事件种类

 

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

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

WXML的冒泡事件列表:

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

 

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

 

 

事件绑定

 

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

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

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

 

如在下边这个例子中,点击 inner view 会先后触发handleTap3handleTap2,点击 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)

  }

})

 

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