foreword

For the current form, WeChat mini-programs are a hot topic, so how do we learn and master them and then do practical projects?
For this reason, I specially set up this column to share it with you as I study!

In this article, we will touch on the issue of event binding, which is the most important user interaction issue for our applet. How do we receive user-triggered information and process it? This article will tell you the answer!

如果在往下阅读的过程中，有什么错误的地方，期待大家的指点！

An introduction to event binding

event isrender layerarrivelogic layerThrough the event, we can feedback the user's operation in the interface to the logic layer for processing.

过程如下图所示：

insert image description here

The basic process is to set the event in .wxml, and then build the handler function in .js.

2. Common events

大家肯定很关注我们到底在平时使用微信小程序时都要用到哪些事件，那么接下来我给大家列举一下。

type	binding method	Event description
tap	bindtap or bind:tap	The click action of the hand (touch and leave, similar to the click event in HTML)
input	bindinput 或 bind：input	textbox input event
change	bindchange or bind:change	state change trigger event

The tap event is very commonly used, because in our WeChat applet, the user action of clicking is inevitable, and most of us need to deal with the click event.

3. Event object property list

When our event is triggered and called back, we will receive an event object event, and then we will introduce its properties in detail.

老规矩我们先通过表格了解一下 event 到底有哪些属性！

Attributes	type	illustrate
type	string	event type
timestamp	integer	Time from page open to event trigger (ms)
target	object	Some property value collection of trigger event component
currentTarget	object	Some property value sets of the current component
detail	object	other details
touches	array	Touch events, an array of touch information currently staying on the screen
changedTouches	array	touch events, an array of currently changed touch information

The function of the type attribute value is to return the type of our event. If it is the tap event in front of us, then our event.type returns the tap
timestamp is the time interval before and after the record event is triggered
The target attribute value is very commonly used, event.target is to display the attribute value of the trigger event
The currentTarget is in contrast to the target above. The currentTarget is the display of the attribute value of the current component, and the target is the display of the attribute value of the first trigger event (we will explain the specific example later)
detail can make additional information about the currently triggered event available through event.detail
touches Get the touch information of the finger on the current screen
changedTouches Get the changed touch point information

3.1 The difference between target and currentTarget

When we mentioned target earlier, we said that these two attribute values are similar but there are substantial differences, so what is the difference between them?

target points to the source component that triggered the event
currentTarget points to the component bound to the current event

我们将事件绑定在 view 组件时，内部如果有一个 button 按钮，那么我们点击按钮的时候，也会触发 view 组件的 tap 事件处理函数！所以说当我们将事件绑定在 view 组件上的时候，我们 target 和 currentTarget 在事件触发时指向不同

3.2 Usage of bindtap

接下来我们将通过在 view 组件中触发 button 按钮的形式来感受一下 bindtap 的用法

Open list.wxml and enter the following code

 <view  class="text1" bindtap="taphander">
 <button type="primary">按钮</button>
 </view>

Open list.js and define the event handler

// pages/list/list.js
  Page({
      
      

  /**
   * 页面的初始数据
   */
  data: {
      
      
    random:(Math.random()*10)+2 ,
    random2:Math.random().toFixed(3)
  },


  //定义 text1 的事件处理函数
  taphander(event){
      
      
  console.log(event)
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
      
      

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
      
      

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
      
      

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
      
      

  },

   /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
      
      

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
      
      

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
      
      

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
      
      

  }
})

上述代码是中我们只要关注 text1 的事件处理函数，就是 data 后面的模块，我们事件处理函数 taphander 的功能就是打印一下事件日志

View in the console of the debugging interface

详细信息可以点击左侧三角形，然后下拉查看

Summary :
1. In the WeChat applet, we use tap events to respond to user clicks.
2. Through the bindtap attribute, we can bind tap events to components
. 3. Define the event handler function in the corresponding .js file. event (also abbreviated as e) receives event parameters

Summarize

Everyone should be happy every day, let's study happily together!