什么是事件
- 事件是视图层到逻辑层的通讯方式。
- 事件可以将用户的行为反馈到逻辑层进行处理。
- 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
- 事件对象可以携带额外信息，如 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，会发现弹窗出来了，我们的打断方法回调就被执行了。
