微信小程序开发

戈亓2024-01-152024-01-16

一、事件绑定

1.基本语法：

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

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

2.常用的事件类型

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

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

3.事件处理函数

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

Page({
    handleTap: function(e){
        //事件处理逻辑
    }
})

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

4.事件的传参和组织冒泡

（1）事件传参—— data-属性实现

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

通过使用在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);
  }
})

（2）阻止冒泡——使用catch绑定事件

1
2
3

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

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

5.示例

<!--index.wxml-->
<view>
  <button bindtap="getUserInfo">获取用户信息</button>
</view>
//index.js
Page({
  getUserInfo: function(e) {
    wx.getUserInfo({
      success: function(res) {
        wx.showModal({
          title: '用户信息',
          content: JSON.stringify(res.userInfo),
          showCancel: false
        })
      }
    })
  },
})