小程序组件 —— 31 事件系统 - 事件绑定和事件对象

小程序中绑定事件和网页开发中绑定事件几乎一致,只不过在小程序不能通过 on 的方式绑定事件,也没有 click 等事件,小程序中绑定事件使用 bind 方法,click 事件也需要使用 tap 事件来进行代替,绑定事件的方式有两种:

  • bind:事件名,bind 后面需要跟上冒号,冒号后面跟上事件名,例如:<view bind:tap="fnName"></view>
  • bind 事件名,bind 后面直接跟上事件名,例如:<view bindtap="fnName"></view>

事件处理函数需要写到 .js 文件中,在 .js 文件中需要调用小程序提供的 Page 方法来注册小程序的页面,我们可以直接在 Page 方法中创建事件处理函数;

下面在微信开发者工具中演示一下:

  • 选择 cate 文件夹下面的 cate.wxml 文件,分别填写两种事件绑定方法:

    xml 复制代码
    <button type="primary" bind:tap="handleClick">绑定事件</button>
    
    <button type="warn" bindtap="handleClick">绑定事件</button>
  • 选择 cate 文件夹下面的 cate.js 文件,填写对应的事件函数,注意事件函数必须填写在 Page 方法中:

    typescript 复制代码
    Page({
    	handleClick () {
        console.log("点击事件触发了")
    	}
    })

编辑完成刷新后,点击按钮,可以在 console 界面看到打印的信息,如下图:

当组件触发事件时,绑定的事件处理函数会收到一个事件对象;在触发事件的时候,事件处理程序会默认给事件处理函数添加一个参数,默认命名为 event,所以我们的事件处理函数可以写为:

typescript 复制代码
	Page({
		handleClick (event) {
        // console.log("点击事件触发了");
        console.log(event);
  		}
	})

具体表现如下:

在点击按钮之后,console 区域会输出一个对象,这个对象记录了事件触发时的一些信息,我们可以使用这个对象来获取相关的数据;

假如我们想获取用户在输入框输入的信息,先在 cate.wxml 中添加一个输入框:

html 复制代码
<!-- 在小程序中,input 输入框默认没有边框,需要自己添加样式 -->
<input type="text" bindinput="getInputValue" />

由于小程序中的 input 输入框默认没有边框,所以可以在根目录的 app.scss 中统一对 input 组件设置样式,如下:

css 复制代码
input {
  border: 1px solid #cccccc;
}

接着在 cate.js 文件中添加事件处理函数,如下:

typescript 复制代码
Page({
	getInputValue(event){
    console.log(event.detail.value);
  }
})

具体的效果如下所示:

在 input 输入信息后,在 console 窗口实时看到具体的输出;

参考视频:尚硅谷微信小程序开发教程

相关推荐
笨笨狗吞噬者几秒前
【uniapp】小程序体积优化,JSON文件压缩
前端·微信小程序·uni-app
bot5556666 分钟前
“企业微信iPad协议”静默 72 小时:一台被遗忘的测试机如何成为私域的逃生梯
javascript·面试
西洼工作室10 分钟前
浏览器事件循环与内存管理可视化
前端·javascript·css·css3
xier12345629 分钟前
高性能和高灵活度的react表格组件
前端
曦曜29230 分钟前
富文本编辑器
javascript
你打不到我呢31 分钟前
nestjs入门:上手数据库与prisma
前端
多啦C梦a32 分钟前
React 实战:从 setInterval 到 useInterval,一次搞懂定时器 Hook(还能暂停!)
前端·javascript·react.js
闲不住的李先森38 分钟前
乐观更新
前端·react.js·设计模式
笔尖的记忆1 小时前
【前端架构和框架】react组件化&数据流
前端·面试
sheji34161 小时前
【开题答辩全过程】以 《基于小程序的校内快递代取服务平台的设计与实现》为例,包含答辩的问题和答案
小程序