【小程序教程】微信小程序之事件绑定_微信小程序按钮绑定事件

微信小程序的事件绑定是非常重要的一部分，它可以让我们的小程序与用户进行交互，实现各种功能，例如点击按钮、滑动页面、输入内容等等。本篇博文将详细介绍微信小程序如何进行事件绑定，并且给出相关的代码示例，方便大家理解。

一、事件绑定的基本语法

在微信小程序中，通过在标签上绑定事件，当用户进行某种操作时，该事件就会被触发，从而执行相应的代码逻辑。事件的基本语法如下：

<view bindtap="handleTap">点击我</view>
1

其中，bindtap表示绑定的事件类型，handleTap表示事件处理函数名，当用户点击该view标签时，事件handleTap就会被触发。

二、常用的事件类型

微信小程序中有许多的事件类型，常用的包括以下几种：

1. bindtap： 点击事件，当用户轻触该元素时触发。
2. bindlongtap：长按事件，当用户长按该元素时触发。
3. bindinput：输入事件，当用户输入内容时触发。
4. bindsubmit：表单提交事件，当用户提交表单时触发。
5. bindscrolltolower：滚动到底部事件，当列表滚动到底部时触发。
6. bindchange：选择器改变事件，当用户选择了下拉框或者滑动选择器时触发。

三、事件处理函数

在事件绑定中，我们需要定义对应的事件处理函数，当事件被触发时，该函数就会执行。事件处理函数的基本语法如下：

//在js文件中
Page({
  handleTap: function(e) {
    //事件处理逻辑
  }
})
1
2
3
4
5
6

其中handleTap是事件处理函数名，function(e)表示函数的参数，这个参数用于接收事件对象e，可以用来获取事件的相关信息，例如e.target表示事件触发的元素，e.detail表示事件的具体信息等等。在函数体中编写事件处理逻辑即可。

四、事件的传参和阻止冒泡

1. 事件传参

有时候我们需要在事件处理函数中传递一些参数，可以使用data-属性来实现。例如：

<button bindtap="handleTap" data-id="{{item.id}}">点击我</button>
1

在button标签中，使用data-id="{{item.id}}"将item.id传递给handleTap函数。

在事件处理函数中，我们可以通过event.currentTarget.dataset.id来获取这个值。

Page({
  handleTap: function(event) {
    var id = event.currentTarget.dataset.id;
    console.log(id);
  }
})
1
2
3
4
5
6

在控制台中就可以看到打印出来的id的值。

2. 阻止冒泡

有时候我们需要阻止事件的冒泡，可以使用catch绑定事件。例如：

<view bindtap="handleTap">
  <button catchtap="handleCatchTap">点击我</button>
</view>
1
2
3

在上面的代码中，当用户点击button时，handleCatchTap函数会被触发，但是不会触发handleTap函数。这样就可以避免事件冒泡了。

五、示例代码

下面给出一个简单的示例代码，当用户点击按钮时，弹出一个提示框，显示用户的信息。

<!--index.wxml-->
<view>
  <button bindtap="getUserInfo">获取用户信息</button>
</view>
1
2
3
4

//index.js
Page({
  getUserInfo: function(e) {
    wx.getUserInfo({
      success: function(res) {
        wx.showModal({
          title: '用户信息',
          content: JSON.stringify(res.userInfo),
          showCancel: false
        })
      }
    })
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在用户点击按钮时，会执行getUserInfo函数，该函数中调用了wx.getUserInfo接口，获取用户信息，并使用wx.showModal函数显示一个提示框，将用户信息以JSON字符串的形式展示出来。

六、总结

通过本篇博文的介绍，我们了解了微信小程序事件绑定的基本语法和常用的事件类型，学会了如何编写事件处理函数、以及传参和阻止冒泡的方法。希望本篇博文可以帮助大家更好地使用微信小程序中的事件绑定功能。