微信小程序:6.事件

什么事事件

事件就是渲染层到逻辑层的通讯方式,比如提交表单,按钮点击都可以看作一个事件。

小程序中常用的事件

事件对象属性列表

当事件回调时,会收到一个事件对象event,他详细属性如夏表所示:

target和currentTarget的区别

target是触发该事件的源头组件,而currentTarget则是当前时间所绑定的事件:

bindtap的语法格式

在小程序中不会通过onclick进行鼠标点击时间,而是通过tap事件响应用户的触摸事件

复制代码
//在js中定义
outerHandle(e){
    console.log(e)
  }

<view class="outview">
  <button type="primary" bind:tap="outerHandle">按钮</button>
</view>

在事件处理函数中data汇总的数据赋值

通过调用this.setData(dataObject)方法,可以给页面中的data中的数据重新赋值

点击按钮number进行增加

复制代码
<view class="outview">
  <text>{{number}}</text>
  <button type="primary" bind:tap="outerHandle">按钮</button>
</view>

事件传参

小程序中的事件穿参比较特殊,不能在绑定事件的同时进行传递参数

小程序中可以为组件童工data-自定义属性穿参,其中代表的是参数的名字,示例代码如下:

复制代码
<button bind:tap="btnhandle" data-info="{{2}}">事件穿参数</button>

最终info会被解析为参数的名字

数字2会被解析为参数的值

在事件处理函数中可以使用event.target.dataset.参数名,可以拿到具体参数值

复制代码
btnhandle(event){
    console.log(event.target.dataset)

    console.log(event.target.dataset.info)
  }

bindinput事件

在小程序中通过input来响应文本框输入事件

1.通过bindinput,可以为文本框绑定输入事件

复制代码
<input type="text" bindinput="inputHandle"/>

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

复制代码
 inputHandle(e){
      console.log(e.detail.value)
  }

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

实现步骤

  1. 定义数据

  2. 渲染结构

  3. 美化样式

  4. 绑定input事件处理函数

    Page({

    /**
    * 页面的初始数据
    */
    data: {
    msg:"你好",
    },

2.在wxml中定义input绑定msg并且定义事件

复制代码
 inputHandle(e){
    // console.log(e.detail.value);
    this.setData({
      msg:e.detail.value
    })
  },
相关推荐
racerun6 小时前
小程序导航设置更多内容的实现方法
小程序
说私域6 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
mg6686 小时前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
程序员柳7 小时前
基于微信小程序的校园二手交易平台、微信小程序校园二手商城源代码+数据库+使用说明,layui+微信小程序+Spring Boot
数据库·微信小程序·layui
Jyywww1219 小时前
微信小程序学习笔记
笔记·学习·微信小程序
The_era_achievs_hero11 小时前
微信小程序41~50
微信小程序·小程序
走,带你去玩19 小时前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
是一碗螺丝粉19 小时前
🔥 微信H5视频自动播放终极秘籍:WeixinJSBridge竟是官方“通行证”?
微信小程序
一笑code20 小时前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react