微信小程序--22(绑定事件1)

一.事件定义

  • 渲染层到逻辑层的通讯方式

二、小程序常用事件

1.tap

  • 手指点击
  • 使用步骤

1.通过bindtap,可以为组件绑定tap事件

2.在页面的.js文件中定义对应事件的处理函数,通过event形参来接收

  • 演示

2.input

  • 文本框的输入
  • 使用步骤

1.通过bindinput绑定输入事件

2.在页面.js文件中定义事件处理函数

3.change

  • 状态改变时触发

三、事件对象属列表

  • 事件回调触发后,会收到一个事件对象的event

1.属性

  • type
    事件类型

  • timeStamp
    触发事件经过的毫秒数

  • target
    触发事件组件的属性集合
    触发该事件的源头组件

  • currentTarger
    当前尊见的属性集合
    当前事件所绑定的组件

  • detail
    额外信息

  • touches
    当前停留在屏幕中的触摸点信息的数组

  • changedTouches
    当前变化的触摸点信息的数组

四、bindtap

  • 事件函数中为data赋值
  • 调用
    this.setData(dataObect)

1.事件传参

  • 不能在绑定事件的同时为事件处理函数传参

2.语法

  • 传递
    data-*

  • 获得
    event.target.dataset.参数名

五、bindinput

1.步骤

实现文本框和data之间的数据同步

  • 1.定义数据
  • 2.渲染结构
  • 3.美化样式
  • 4绑定input事件处理函数
相关推荐
codingWhat35 分钟前
uniapp 多地区、多平台、多环境打包方案
前端·架构·node.js
HelloReader38 分钟前
从 Tauri 2.0 Beta 升级到 2.0 Release Candidate Capabilities 权限前缀与内置 Dev Server 网络策略变
前端
只与明月听1 小时前
RAG深入学习之Chunk
前端·人工智能·python
一枚前端小姐姐2 小时前
低代码平台表单设计系统架构分析(实战一)
前端·低代码·架构
HelloReader2 小时前
Tauri 1.0 升级到 Tauri 2.0从“能跑”到“跑得稳”的迁移实战指南(含移动端准备、配置重构、插件化 API、权限系统)
前端
JunjunZ2 小时前
uniapp 文件预览:从文件流到多格式预览的完整实现
前端·uni-app
_Eleven2 小时前
React 19 深度解析:Actions 与 use API 源码揭秘
前端
_AaronWong2 小时前
Vue3+Element Plus 通用表格组件封装与使用实践
前端·javascript·vue.js
前端西瓜哥2 小时前
图形编辑器开发:文字排版如何实现自动换行?
前端
全栈老石3 小时前
手写一个无限画布 #3:如何在Canvas 层上建立事件体系
前端·javascript·canvas