微信小程序-小程序事件绑定

什么是事件

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

常见事件

• tap：手指触摸后马上离开
• longpress：手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
• touchstart：手指触摸动作开始
• touchmove：手指触摸后移动
• touchcancel：手指触摸动作被打断，如来电提醒，弹窗
• touchend：手指触摸动作结束

如何绑定事件

bind：绑定冒泡事件
capture-bind：绑定捕获事件
catch：阻止冒泡事件
capture-catch：阻止捕获事件

绑定事件示例:

index.wxml:

<view bind:tap="onTap">我是bind</view>
<view capture-bind:tap="onCaptureBind">我是capture-bind</view>
<view catch:tap="onCatch">我是catch</view>
<view capture-catch:tap="onCaptureCatch">我是capture-catch</view>

index.js:

onTap: function(){
  console.log('onTap call');
},
onCaptureBind: function(){
  console.log('onCaptureBind call');
},
onCatch: function(){
  console.log('onCatch call');
},
onCaptureCatch: function(){
  console.log('onCaptureCatch call');
},

常见事件示例:

index.wxml:

<view bind:tap="onTap">手指触摸后马上离开</view>
<view bind:longpress="onLongpress">手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发</view>
<view bind:touchstart="onTouchstart">手指触摸动作开始</view>
<view bind:touchmove="onTouchmove">手指触摸后移动</view>
<view bind:touchend="onTouchend">手指触摸动作结束</view>

index.js:

onTap: function(){
  console.log('onTap call');
},
onLongpress: function(){
  console.log('onLongpress call');
},
onTouchstart: function(){
  console.log('onTouchstart call');
},
onTouchmove: function(){
  console.log('onTouchmove call');
},
onTouchend: function(){
  console.log('onTouchend call');
},

!> touchcancel：手指触摸动作被打断，如来电提醒，弹窗

index.wxml:

<view bind:touchcancel="onTouchcancel">手指触摸动作被打断，如来电提醒，弹窗</view>

index.js:

onTouchcancel: function(){
  console.log('onTouchcancel call');
},
/**
 * 生命周期函数--监听页面加载
 */
onLoad: function (options) {
  setTimeout(()=>{
    wx.showModal({
      title: '我是弹窗',
      content: '我是弹窗内容'
    });
  }, 3000);
},

我这里使用了弹窗来进行模拟触摸被打断，编译好了代码点击页面的view，然后等待定时器3s，会发现弹窗出来了，我们的打断方法回调就被执行了。