【微信小程序/事件】事件响应的各种场景

原创已于 2022-02-10 00:18:51 修改 · 1.9k 阅读

CC 4.0 BY-SA版权

文章标签：

于 2022-02-10 00:12:40 首次发布

7 篇文章

订阅专栏

本文详细介绍了微信小程序中四个重要的事件响应：bindtap点击事件、bindfocus聚焦事件、bindblur失焦事件和bindinput输入事件。通过示例代码展示了如何在WXML和JS文件中使用这些事件，帮助开发者理解它们的工作原理和应用场景。

顾名思义，点击就会响应

<!-- wxml -->
<view  bindtap="tap"> Click me! </view>
<!-- 点击后，就会执行位于js文件中的名为 "tap" 的方法 -->

//js
Page({
  tap: function(e) {
    console.log(e);
  }
})

适用于像input、textarea这类的输入框，当输入框得到焦点，就会触发事件。

<!-- wxml -->
<input  bindfocus="focu"></input>
<!-- 得到焦点后，就会执行位于js文件中的名为 focu" 的方法 -->

//js
Page({
  focu: function(e) {
    console.log(e);
  }
})

适用于像input、textarea这类的输入框，当输入框失去焦点，就会触发事件。

<!-- wxml -->
<input  bindblur="blur"></input>
<!-- 得到焦点后，就会执行位于js文件中的名为 blur" 的方法 -->

//js
Page({
  blur: function() {
  	...
  }
})

适用于像input、textarea这类的输入框，当输入框被输入内容时，就会触发事件。

<!-- wxml -->
<input  bindblur="input"></input>
<!-- 得到焦点后，就会执行位于js文件中的名为 input" 的方法 -->

//js
Page({
  blur: function(e) {
  	console.log(e.detaile.value);  //在终端打印正在输入的内容
  }
})