【小程序教程】微信小程序的事件处理和交互逻辑（tap logpress touchmove input submint事件&冒泡与捕捉最详细讲解）_微信小程序点击事件

为什么要学习事件处理和交互逻辑？

事件处理和交互逻辑在小程序开发中扮演着至关重要的角色。以下是几个原因：

• 提升用户体验：良好的事件处理和交互逻辑可以使小程序更加易用和友好，提升用户体验。通过合理设置事件触发条件和交互效果，可以使用户操作更加顺畅和自然。

• 增加功能和互动性：事件处理可以实现用户与小程序之间的交互，例如点击按钮、滑动页面、输入表单等。通过事件处理，开发者可以为小程序增加各种功能和互动性，满足用户的需求。

• 数据交互和更新：事件处理可以与后台数据进行交互，实现数据的获取、更新和展示。通过合理处理事件，可以实现数据的实时更新和展示，提供更加动态和丰富的内容。

• 逻辑控制和业务流程：事件处理和交互逻辑可以实现小程序的逻辑控制和业务流程。通过条件判断、跳转页面、异步操作等，可以实现复杂的业务逻辑和流程控制。

1. 事件处理基础

了解了事件类型和触发条件、事件绑定和监听、事件对象和属性后，我们可以更好地理解和应用事件处理和交互逻辑。

1).事件类型和触发条件

在微信小程序中，常见的事件类型包括点击事件（tap）、长按事件（longpress）、滑动事件（touchmove）、输入事件（input）、表单提交事件（submit）等。每种事件类型都有对应的触发条件，例如点击事件需要用户点击某个元素，长按事件需要用户长时间按住某个元素等。

2).事件绑定和监听

在小程序中，我们可以通过在组件上绑定事件来监听用户的操作。事件绑定可以在组件的标签上使用 bind 或 catch 属性，后接事件类型和对应的处理函数名称。例如，对于点击事件，可以使用 bindtap 或 catchtap 属性来绑定事件。

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

在对应的 Page 或 Component 的 JavaScript 文件中，可以定义对应的事件处理函数。

Page({
  handleTap:function(event){
    console.log("点击了组件");
  }
})
1
2
3
4
5

3).事件对象和属性

当事件触发时，小程序会自动将事件对象传递给事件处理函数。事件对象包含了一些属性，可以用于获取触发事件的相关信息，例如触发事件的元素、坐标、触摸点等。

常见的事件对象属性包括：

• type：事件类型，例如 tap、longpress 等。
• target：触发事件的组件的一些信息，例如 id、class、dataset 等。
• currentTarget：当前正在处理事件的组件的一些信息。
• touches：触摸点的信息，例如坐标、标识符等。
• timeStamp：事件触发的时间戳。

通过访问事件对象的属性，我们可以获取和处理事件相关的信息，以实现更复杂的交互逻辑。

2.常见的事件处理方法

在微信小程序开发中，有许多常见的事件处理方法可以用于实现不同的交互逻辑。下面将介绍几种常见的事件处理方法。

1).点击事件（tap）

点击事件（tap）是最常见的事件之一，当用户点击某个元素时触发。可以通过在组件上使用 bindtap 或 catchtap 属性来绑定点击事件。

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

在对应的 Page 或 Component 的 JavaScript 文件中，定义对应的事件处理函数。

Page({
  handleTap:function(event){
    console.log("点击了组件");
  }
})
1
2
3
4
5

2).长按事件（longpress）

长按事件（longpress）在用户长时间按住某个元素时触发。可以通过在组件上使用 bindlongpress 或 catchlongpress 属性来绑定长按事件。

<view bindlongpress="handleLongPress">长按我</view>
1

在对应的 Page 或 Component 的 JavaScript 文件中，定义对应的事件处理函数。

Page({
  handleLongPress:function(event){
    console.log("长按了组件");
  }
})
1
2
3
4
5

3).滑动事件（touchmove）

滑动事件（touchmove）在用户触摸屏幕并滑动时触发。可以通过在组件上使用 bindtouchmove 或 catchtouchmove 属性来绑定滑动事件。

<view bindtouchmove="handleTouchMove">滑动我</view>
1

在对应的 Page 或 Component 的 JavaScript 文件中，定义对应的事件处理函数。

Page({
  handleTouchMove:function(event){
    console.log("滑动了组件");
  }
})
1
2
3
4
5

4).输入事件（input）

输入事件（input）在用户输入内容时触发。可以通过在输入组件上使用 bindinput 或 catchinput 属性来绑定输入事件。

<input bindinput="handleInput" placeholder="请输入内容"/>
1

在对应的 Page 或 Component 的 JavaScript 文件中，定义对应的事件处理函数。

Page({
  handleInput:function(event){
    console.log("输入了内容："+ event.detail.value);
  }
})
1
2
3
4
5

5).表单提交事件（submit）

表单提交事件（submit）在用户提交表单时触发。可以通过在表单组件上使用 bindsubmit 或 catchsubmit 属性来绑定表单提交事件。

<form bindsubmit="handleSubmit">
  <input name="username" placeholder="请输入用户名"/>
  <input name="password" type="password" placeholder="请输入密码"/>
  <button form-type="submit">提交</button>
</form>
1
2
3
4
5

在对应的 Page 或 Component 的 JavaScript 文件中，定义对应的事件处理函数。

Page({
  handleSubmit:function(event){
    console.log("表单提交了，用户名："+ event.detail.value.username +"，密码："+ event.detail.value.password);
  }
})
1
2
3
4
5

以上是常见的几种事件处理方法，通过合理使用这些方法，可以实现不同的交互逻辑和功能。在实际开发中，还有许多其他的事件处理方法，你可以根据具体需求进行选择和使用。

3.事件冒泡和捕获

事件冒泡是指当一个元素上的事件被触发时，它会向父级元素逐级冒泡触发，直到冒泡到最顶层的元素。例如，当我们点击一个按钮时，点击事件会先触发按钮元素上的事件处理函数，然后逐级向上触发父级元素的事件处理函数。

事件冒泡的原理和机制可以用以下几点来解释：

1. 事件冒泡是由浏览器自动完成的，无需开发者手动控制。
2. 事件冒泡是从触发事件的元素开始，逐级向上冒泡到最顶层元素。
3. 父级元素上的事件处理函数会在子级元素上的事件处理函数执行完毕后触发。
4. 事件冒泡可以实现事件的委托和批量处理，提高代码的可维护性和性能。

1).如何阻止事件冒泡

在某些情况下，我们可能希望阻止事件的冒泡，即在某个元素上触发事件后，不再向上冒泡到父级元素。可以通过调用事件对象的 stopPropagation 方法来阻止事件冒泡。

Page({
  handleTap:function(event){
    console.log("点击了子元素");
    event.stopPropagation();
  },
  handleParentTap:function(event){
    console.log("点击了父元素");
  }
})
1
2
3
4
5
6
7
8
9

在上述代码中，当点击子元素时，子元素的事件处理函数会被触发，但父元素的事件处理函数不会被触发，因为我们调用了 event.stopPropagation() 方法阻止了事件的冒泡。

2).事件捕获的使用场景

除了事件冒泡，还存在另一种事件传播机制，即事件捕获。事件捕获是指事件从最顶层元素开始，逐级向下捕获到触发事件的元素。在小程序中，默认情况下不会触发事件捕获阶段，只会触发事件冒泡阶段。

事件捕获的使用场景相对较少，但在某些情况下仍然有一些应用。例如，当我们希望在触发事件的元素之前捕获事件，可以通过在组件上使用 capture-bind 或 capture-catch 属性来绑定事件。

<view capture-bindtap="handleCaptureTap">捕获点击事件</view>
1

Page({
  handleCaptureTap:function(event){
    console.log("捕获到点击事件");
  }
})
1
2
3
4
5
6

在上述代码中，当点击元素时，会先触发捕获阶段的事件处理函数，然后再触发冒泡阶段的事件处理函数。
需要注意的是，事件捕获在小程序中的使用相对较少，大部分情况下我们只需要关注事件冒泡即可。

4.交互逻辑实现

在微信小程序开发中，实现交互逻辑是非常重要的。下面将介绍几个常见的交互逻辑实现方法。

1).条件判断和逻辑控制

在小程序中，我们可以使用条件判断语句（如 if、else if、else）来实现逻辑控制。通过判断条件的真假，我们可以执行不同的代码块。

Page({
  data:{
    isShow:true,
    score:80
  },
  toggleShow:function(){
    this.setData({
      isShow:!this.data.isShow
    });
  },
  getGrade:function(){
    if(this.data.score >=90){
      console.log("优秀");
    }elseif(this.data.score >=80){
      console.log("良好");
    }elseif(this.data.score >=60){
      console.log("及格");
    }else{
      console.log("不及格");
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在上述代码中，我们使用 if 条件判断语句来根据 score 的不同值输出不同的成绩等级。通过 toggleShow 方法可以切换 isShow 的值，从而控制某个元素的显示与隐藏。

2).数据绑定和更新

在小程序中，我们可以使用数据绑定和更新来实现动态的交互效果。通过 setData 方法可以更新数据，并触发页面的重新渲染。

Page({
  data:{
    count:0
  },
  increaseCount:function(){
    this.setData({
      count:this.data.count +1
    });
  }
})
1
2
3
4
5
6
7
8
9
10

在上述代码中，我们通过 increaseCount 方法来增加 count 的值，并通过 setData 方法更新数据。更新数据后，小程序会自动重新渲染页面，显示最新的数据。
页面跳转和传参

在小程序中，我们可以通过页面跳转来实现不同页面之间的交互。可以使用 navigateTo、redirectTo、switchTab 等方法来跳转到不同的页面。

Page({
  goToPage:function(){
    wx.navigateTo({
      url:'/pages/otherPage/otherPage?id=123'
    });
  }
})
1
2
3
4
5
6
7

在上述代码中，我们通过 navigateTo 方法跳转到名为 otherPage 的页面，并传递参数 id。

在目标页面中，可以通过 getCurrentPages 方法获取当前页面栈，并通过 options 属性获取传递的参数。

Page({
  onLoad:function(options){
    console.log("接收到的参数："+ options.id);
  }
})
1
2
3
4
5

在上述代码中，我们在目标页面的 onLoad 方法中获取传递的参数，并输出到控制台。

3).异步操作和回调函数

在小程序开发中，经常会涉及到异步操作，例如网络请求、定时器等。为了处理异步操作的结果，我们可以使用回调函数。

Page({
  getData:function(callback){
    setTimeout(function(){
      var data ="这是异步获取的数据";
      callback(data);
    },1000);
  },
  handleData:function(){
    this.getData(function(data){
      console.log("获取到的数据："+ data);
    });
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13

在上述代码中，我们通过 getData 方法模拟异步获取数据的过程，并通过回调函数将获取的数据传递给 handleData 方法进行处理。

以上是一些常见的交互逻辑实现方法，通过合理运用这些方法，我们可以实现丰富的交互效果和功能。在实际开发中，根据具体需求，你可以选择适合的方法来实现交互逻辑。