【愚公系列】《微信小程序开发解析》005-事件

🏆 作者简介，愚公搬代码
🏆《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
🏆《近期荣誉》：2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。
🏆《博客内容》：.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
🏆🎉欢迎 👍点赞✍评论⭐收藏

---

🚀前言

在微信小程序中，事件是用户和程序之间交互的核心概念。通过事件，用户可以与小程序进行各种交互操作，例如点击按钮、输入文字、滑动屏幕等。以下是微信小程序中事件的概念和使用方法。

事件类型

1. 触摸事件：包括触摸开始、触摸移动、触摸结束等，如 touchstart、touchmove、touchend 等。
2. 鼠标事件：主要用于 PC 端小程序，如 click、dblclick 等。
3. 表单事件：与表单控件相关的事件，如 submit、input、focus、blur 等。
4. 媒体事件：与音视频控件相关的事件，如 play、pause、ended 等。
5. 页面事件：与页面生命周期相关的事件，如 onLoad、onReady、onShow、onHide、onUnload 等。

事件绑定

在 WXML 中，通过 bind 或 catch 关键字来绑定事件处理函数。例如：

• bindtap：绑定点击事件。
• bindinput：绑定输入事件。

🚀一、事件

🔎1.简单事件

在微信小程序（WeChat Mini Programs）中，事件处理是实现用户交互的核心部分。

🦋1.1 点击事件（Tap Event）

点击事件是最常见的事件之一，可以用于按钮点击、图片点击等。

示例代码：

<!-- WXML -->
<view bindtap="handleTap">点击我</view>

// JS
Page({
   
  handleTap: function() {
   
    wx.showToast({
   
      title: '你点击了我!',
      icon: 'none'
    });
  }
})

🦋1.2 输入事件（Input Event）

输入事件用于处理用户在输入框中的输入操作。

示例代码：

<!-- WXML -->
<input bindinput="handleInput" placeholder="请输入内容"/>

// JS
Page({
   
  data: {
   
    inputValue: ''
  },
  handleInput: function(event) {
   
    this.setData({
   
      inputValue: event.detail.value
    });
  }
})

🦋1.3 表单提交事件（Submit Event）

表单提交事件用于处理用户提交表单时的操作。

示例代码：

<!-- WXML -->
<form bindsubmit="handleSubmit">
  <input name="username" placeholder="用户名"/>
  <button formType="submit">提交</button>
</form>

// JS
Page({
   
  handleSubmit: function(event) {
   
    const formData = event.detail.value;
    wx.showModal({
   
      title: '表单数据',
      content: `用户名: ${
     formData.username}`,
      showCancel: false
    });
  }
})

🦋1.4 切换事件（Change Event）

切换事件通常用于处理滑块或开关等组件的状态变化。

示例代码：

<!-- WXML -->
<switch bindchange="handleSwitchChange"/>

// JS
Page({
   
  handleSwitchChange: function(event) {
   
    wx.showToast({
   
      title: event.detail.value ? '开关已打开' : '开关已关闭',
      icon: 'none'
    });
  }
})

🦋1.5 滑动事件（Scroll Event）

滑动事件用于处理页面或某个区域的滚动操作。

示例代码：

<!-- WXML -->
<scroll-view bindscroll="handleScroll" style="height: 200px;" scroll-y>
  <!-- 内容 -->
</scroll-view>

// JS
Page({
   
  handleScroll: function(event) {
   
    console.log('滚动位置:', event.detail.scrollTop);
  }
})

🔎2.事件参数

在微信小程序中，事件参数是在事件触发时传递给事件处理函数的信息。这些参数通常包含关于事件的详细信息，例如事件类型、触发事件的元素、触摸点信息等。

以下是一些常见的事件参数：

1. event: 主要的事件对象，包含以下属性和方法。

   • type: 事件类型，例如 tap、touchstart、touchmove、touchend 等。
   • timeStamp: 事件生成时的时间戳。
   • target: 触发事件的组件的相关信息，包含以下属性：
     • id: 触发事件的组件的ID。
     • dataset: 触发事件的组件上绑定的 data- 属性集合（例如 data-foo="bar"）。
   • currentTarget: 当前处理事件的组件的相关信息，结构同 target。
   • detail: 事件的详细信息，不同类型的事件会有不同的 detail 数据。例如：
     • 对于 tap 事件，detail 包含 x 和 y 属性，表示触摸点相对于目标元素的坐标。
     • 对于 input