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

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

文章目录

?前言

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

事件类型

事件绑定

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

?一、事件

?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"   scroll-y>
  <!-- 内容 -->
</scroll-view>

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

?2.事件参数

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

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

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

总结