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

合集 - 微信小程序(60)

1.小程序开发概述2023-04-022.创建第一个小程序2023-04-023.微信小程序app.json文件2023-04-024.微信小程序-sitemap.json文件2023-04-025.微信小程序app.js文件2023-04-026.微信小程序app.wxss文件2023-04-027.微信小程序-project.config.json文件2023-04-068.微信小程序-页面.json文件2023-04-059.微信小程序-页面.js文件2023-04-0510.微信小程序-组件创建和使用2023-04-0611.微信小程序-组件-.json文件2023-04-0612.微信小程序-组件-.js文件2023-04-0613.微信小程序-WXSS学什么2023-04-0714.微信小程序-WXSS的书写格式2023-04-0715.微信小程序-新增RPX响应式单位2023-04-0716.微信小程序-什么是WXML2023-04-0917.微信小程序-WXML数据绑定2023-04-0918.微信小程序-WXML条件渲染2023-04-0919.微信小程序-WXML的hidden属性2023-04-0820.微信小程序-WXML列表渲染2023-04-0921.微信小程序-WXML列表渲染Key2023-04-0922.微信小程序-WXML包装元素2023-04-0923.微信小程序-WXS的作用和使用2023-04-1424.微信小程序-WXS独立文件2023-04-1425.微信小程序-WXS支持的语法2023-04-14

26.微信小程序-小程序事件绑定2023-04-16

27.微信小程序-小程序事件冒泡和事件捕获2023-04-1628.微信小程序-事件传递数据2023-04-1629.微信小程序-data和mark2023-04-2030.微信小程序-touches和changedTouches2023-04-2131.微信小程序-案例练习2023-04-2132.微信小程序-view组件2023-04-2233.微信小程序-text组件2023-04-2234.微信小程序-icon组件2023-04-2235.微信小程序-button组件2023-04-2236.微信小程序-image组件2023-04-2437.微信小程序-scrollview2023-05-1338.微信小程序-image组件-选择相册资源案例2023-04-2439.微信小程序-自定义组件2023-05-1340.微信小程序-自定义组件样式隔离2023-05-1441.微信小程序-自定义组件外部样式2023-05-1442.微信小程序-传递数据父传子2023-05-1443.微信小程序-传递数据子传父2023-05-1444.微信小程序-页面访问组件数据和方法2023-05-1445.微信小程序-组件通讯练习2023-05-1446.微信小程序-单个插槽2023-05-1547.微信小程序-多个插槽-具名插槽2023-05-1648.微信小程序-behaviors2023-05-1749.微信小程序-双线程渲染模型2023-05-1850.微信小程序-页面生命周期2023-05-2051.微信小程序-页面生命周期方法2023-05-2152.微信小程序-组件生命周期方法2023-05-2153.微信小程序-应用程序生命周期方法2023-05-2154.微信小程序-页面跳转Tabbar2023-05-2155.微信小程序-页面跳转navigator组件2023-05-2156.微信小程序-页面跳转wxAPI2023-05-2157.微信小程序-页面跳转数据传递2023-05-2158.微信小程序-常用弹窗2023-05-2159.微信小程序-Storage2023-05-2160.微信小程序-获取用户位置2023-05-21

收起

什么是事件

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