位置: IT常识 - 正文

【uniapp】 的事件处理详解(uniapp实战)

编辑:rootadmin
【uniapp】 的事件处理详解

推荐整理分享【uniapp】 的事件处理详解(uniapp实战),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:/uniapp,uniapp示例,uniapp常用方法,uniapp实战教程,uniapp实战教程,uniapp实战教程,uniapp示例,uniapp示例,内容如对您有帮助,希望把文章链接给更多的朋友!

UniApp 是一个跨平台的开发框架,支持多种前端框架(Vue、React、Angular 等),并能打包成多种运行平台(H5、小程序、App 等)。在 UniApp 中,事件处理非常重要,通过事件处理可以实现用户与应用程序之间的交互。下面是 UniApp 中常用的事件处理方式:

1. 绑定事件

在模板中可以通过 @ 符号绑定事件,例如:

<button @click="handleClick">点击我</button>这里绑定了一个 click 事件,并且绑定的函数是 handleClick。2. 事件修饰符【uniapp】 的事件处理详解(uniapp实战)

事件修饰符是指在绑定事件时使用的一些特殊符号,用于修改事件的行为。常见的事件修饰符包括:

prevent:阻止默认行为stop:阻止事件冒泡capture:使用事件捕获模式self:只有当事件是从事件源本身触发时才触发回调函数once:只触发一次回调函数passive:提高页面滚动的流畅度

例如:

<!-- 阻止默认行为 --><button @click.prevent="handleClick">点击我</button><!-- 阻止事件冒泡 --><button @click.stop="handleClick">点击我</button><!-- 使用事件捕获模式 --><button @click.capture="handleClick">点击我</button><!-- 只有当事件是从事件源本身触发时才触发回调函数 --><button @click.self="handleClick">点击我</button><!-- 只触发一次回调函数 --><button @click.once="handleClick">点击我</button><!-- 提高页面滚动的流畅度 --><button @click.passive="handleClick">点击我</button>.prevent 和 .stop 是两种不同的事件修饰符,虽然它们有一些相似之处,但是在事件处理中有不同的作用。1 .prevent 用于阻止事件的默认行为,例如阻止 <a> 标签的默认跳转、阻止表单的默认提交等。如果一个事件被 .prevent 修饰符修饰了,则在事件触发时,不会执行事件的默认行为,而只会执行`绑定的事件处理函数`。2 .stop 用于阻止事件的冒泡传播,事件冒泡是指当一个元素触发事件时,该事件会向父级元素传播。如果一个事件被 .stop 修饰符修饰了,则在事件触发时,不会向上层元素传播该事件,而只会在当前元素内部进行处理。因此,.prevent 和 .stop 的作用是不同的,但是它们都能够阻止事件的默认行为。.prevent 用于阻止元素的默认行为,.stop 用于阻止事件的冒泡传播。具体示例:当一个链接被点击时,会触发 click 事件。如果链接没有设置 href 属性,则默认的行为是不进行跳转,但如果设置了 href 属性,则会跳转到 href 指定的页面。在这种情况下,可以使用 .prevent 和 .stop 修饰符来阻止链接的默认跳转行为和冒泡传播。我们给链接设置了 href 属性,并绑定了 click 事件和 handleLinkClick 方法。同时,我们在链接上使用了 .prevent 和 .stop 修饰符来阻止默认的跳转行为和冒泡传播。<template> <div @click="handleDivClick">//上层点击事件。用了检测下面的点击事件有没有冒泡上来 <a href="https://www.example.com" @click.prevent.stop="handleLinkClick">点击我</a> </div></template><script>export default { methods: { handleLinkClick() { console.log('内部事件————链接被点击了'); }, handleDivClick() { console.log('外部事件————div 被点击了'); } }};</script>在点击链接时,控制台会输出 【内部事件————链接被点击了】链接被点击了,而不会进行跳转。同时,由于使用了 .stop 修饰符,事件也不会向上层元素冒泡传播,因此点击链接时不会触发外部事件 handleDivClick 方法。1、如果我们把 .prevent 修饰符去掉,点击链接时会进行跳转。说明默认行为存在,但是被阻止了。2、如果把 .stop 修饰符去掉,点击链接时会触发 handleDivClick 方法。说明点击事件冒泡了。这说明了 .prevent 和 .stop 修饰符的区别,.prevent 可以阻止默认行为,.stop 可以阻止冒泡传播。默认行为指的是元素在触发某些事件时,浏览器会执行的预设行为。例如,当用户点击一个链接时,浏览器默认会跳转到该链接所指定的 URL。当用户提交一个表单时,浏览器默认会向服务器发送表单数据并刷新页面。这些行为是浏览器内置的,可以通过 JavaScript 代码来阻止或修改。3. 内置事件

在 UniApp 中,还有一些内置事件可以使用。这些事件是指在特定情况下自动触发的事件,例如:

onLoad:页面加载完成时触发onReady:页面初次渲染完成时触发onShow:页面展示时触发onHide:页面隐藏时触发onUnload:页面卸载时触发

这些事件可以在页面或组件中使用,例如:

export default { onLoad() { console.log('页面加载完成'); }, onReady() { console.log('页面初次渲染完成'); }, onShow() { console.log('页面展示'); }, onHide() { console.log('页面隐藏'); }, onUnload() { console.log('页面卸载'); }}4. 自定义事件

在 UniApp 中,还可以通过 uni.emit和uni.emit 和 uni.emit和uni.on 方法来实现自定义事件的处理。例如:

// 发送自定义事件uni.$emit('myEvent', {data: '自定义事件参数'});// 监听自定义事件uni.$on('myEvent', (data) => { console.log('接收到自定义事件', data);});这里通过 uni.$emit 发送了一个名为 myEvent 的自定义事件,并传递了一个参数 {data: '自定义事件参数'}。在需要监听该事件的地方,可以使用 uni.$on 方法来监听该事件,并在回调函数中处理事件。5. 事件对象

在事件处理函数中,可以通过 $event 参数来获取事件对象,事件对象包含了事件的一些信息,例如:

type:事件类型 target:事件源 currentTarget:当前组件 detail:自定义数据 例如:

<button @click="handleClick">点击我</button>methods: { handleClick($event) { console.log('事件类型', $event.type); console.log('事件源', $event.target); console.log('当前组件', $event.currentTarget); console.log('自定义数据', $event.detail); }}以上就是 UniApp 中常用的事件处理方式,包括绑定事件、事件修饰符、内置事件、自定义事件和事件对象。掌握这些知识,可以更加灵活地处理事件,实现丰富的用户交互效果。
本文链接地址:https://www.jiuchutong.com/zhishi/292955.html 转载请保留说明!

上一篇:【vue】vuex中modules的基本用法(vuex model)

下一篇:面试官:一千万的数据,你是怎么查询的(面试官:一千万是真的吗)

  • 真我q3s电池容量是多少(真我q3pro电池容量)

    真我q3s电池容量是多少(真我q3pro电池容量)

  • 苹果11如何设置热点(苹果11如何设置nfc)

    苹果11如何设置热点(苹果11如何设置nfc)

  • 苹果手机充电时指纹不能用(苹果手机充电时显示不支持此配件怎么办)

    苹果手机充电时指纹不能用(苹果手机充电时显示不支持此配件怎么办)

  • 微信怎么自动退出了登录(微信怎么自动退群)

    微信怎么自动退出了登录(微信怎么自动退群)

  • 怎么卸载拼多多软件

    怎么卸载拼多多软件

  • 微信收款简报可以消除记录吗(微信收款简报顾客管理怎么删除)

    微信收款简报可以消除记录吗(微信收款简报顾客管理怎么删除)

  • 电脑微信和手机微信能不同时在线吗(电脑微信和手机微信可以不同步吗)

    电脑微信和手机微信能不同时在线吗(电脑微信和手机微信可以不同步吗)

  • 是什么导致苹果电池健康下降的(苹果手机是因为)

    是什么导致苹果电池健康下降的(苹果手机是因为)

  • 苹果7要不要升级13.3

    苹果7要不要升级13.3

  • 华为p40pro上市时间(华为p40pro上市时间及价格参数)

    华为p40pro上市时间(华为p40pro上市时间及价格参数)

  • 华为原装电池什么牌子(华为原装电池什么颜色)

    华为原装电池什么牌子(华为原装电池什么颜色)

  • 1600mb等于多少g内存(1600mb是多少g)

    1600mb等于多少g内存(1600mb是多少g)

  • 荣耀20s没耳机孔怎么听歌(荣耀20pro无耳机插孔)

    荣耀20s没耳机孔怎么听歌(荣耀20pro无耳机插孔)

  • 小米怎么设置app使用时间(小米怎么设置APP自动关闭)

    小米怎么设置app使用时间(小米怎么设置APP自动关闭)

  • vivo哪款支持无线充电(vivo哪款支持无线carplay好)

    vivo哪款支持无线充电(vivo哪款支持无线carplay好)

  • iphone的原彩显示有什么用吗(iphone的原彩显示发黄)

    iphone的原彩显示有什么用吗(iphone的原彩显示发黄)

  • 华为荣耀手环4如何刷公交卡(华为荣耀手环4和5有什么区别)

    华为荣耀手环4如何刷公交卡(华为荣耀手环4和5有什么区别)

  • vivoy3可以无线充电吗(vivoy3支持无线充电)

    vivoy3可以无线充电吗(vivoy3支持无线充电)

  • duallens是什么型号(dures是什么?)

    duallens是什么型号(dures是什么?)

  • 安卓系统是中国的吗(安卓系统属于中国吗)

    安卓系统是中国的吗(安卓系统属于中国吗)

  • AriaNg Native 1.2.4 Aria2图形界面下载工具 中文免费版 32/64位

    AriaNg Native 1.2.4 Aria2图形界面下载工具 中文免费版 32/64位

  • 古老的水青冈树,英国北安普顿郡 (© Andrew Baskott/Alamy)(水青冈是常绿还是落叶)

    古老的水青冈树,英国北安普顿郡 (© Andrew Baskott/Alamy)(水青冈是常绿还是落叶)

  • flutter 环境搭建(flutter项目怎么运行)

    flutter 环境搭建(flutter项目怎么运行)

  • WordPress安全防护 你可以做这些事情(wordpress防盗链)

    WordPress安全防护 你可以做这些事情(wordpress防盗链)

  • 资产交换的涉税处理
  • 利润表中的所得税
  • 合并报表会计未分配利润怎么填写?
  • 商品流通企业应收账款的研究
  • 口罩属于什么经营类别
  • 承兑汇票区别
  • 过路费按照什么缴纳增值税
  • 工程机械租赁增值税税率很多适用错误应该是9不是13
  • 私车公用可以企业所得税税前扣除吗
  • 外币结汇怎么做账
  • 过期的食品退回去厂里怎么处理
  • 销售现金券会计分录
  • 企业债务的利息允许从税前利润扣除是什么意思
  • 不需要抵扣的怎么直接进费用
  • 增值税的专用发票金额含税吗
  • 以前年度的税金及附加
  • 税号里的字母要大写还是小写
  • 外地项目预缴个人所得税
  • 固定资产投资成本的回收与实物更新
  • 原料采购入库检测损耗的会计处理怎么做?
  • 利率和利息的区别白话
  • 建筑企业如何预缴企业所得税
  • 参保各险种人数统计
  • scsiaccess.exe - scsiaccess是什么进程 有什么用
  • 政府补助退回的账务处理
  • php中的require
  • 冲回以前年度计提的坏账准备
  • PHP:zip_entry_open()的用法_Zip函数
  • php graph
  • 票据贴现税务处理
  • js前端路由
  • javascript入门基础
  • node实战
  • 小程序设计制作
  • 3d人体骨骼模型软件
  • Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
  • 公允价值变动损益会计处理
  • 产品补发原来的要退吗
  • 小规模纳税人企业所得税优惠政策最新2023
  • 给员工分红是否交税
  • c语言怎么给函数传递数组
  • vuex 3
  • 美团平台技术部是干什么的
  • 第一季度利润表年初余额
  • 乘客人身意外保险单可以报销吗
  • 我们公司投资新公司做账
  • 老板借给公司钱需要交税吗
  • 什么叫做未入账金额
  • 公司车辆做账交增值税吗
  • 应付账款可以用现金支付吗
  • 租赁合同的印花税的计税依据
  • 企业取得的土地使用权用于自行开发建造厂房
  • 空头支票是什么数字
  • 一般户和基本户怎么使用最好
  • 没有销售收入可以有销售费用吗
  • mysql8 存储引擎
  • mysql日志的作用
  • 计算机二级考试报名入口官网
  • mac键盘图标与对应不匹配
  • 磁贴for kwgt
  • WIN10系统崩溃如何自救?
  • xp系统win键没反应
  • 如何去掉windows不是正版
  • Bootstrap与KnockoutJs相结合实现分页效果实例详解
  • windows下用CMD调用COM口
  • Android 中的 TableLayout 继承自
  • 安装运行windows
  • html中<
  • NGUI的depth和Z轴的关系
  • NGUI之UITab Bar的不能将Sprite与SelectedSprite设置成相同的精灵
  • jQuery通过ajax快速批量提交表单数据
  • 猫的所有视频
  • javascriptj
  • 安卓手机管家是什么
  • python库怎么用
  • python 解析算法
  • 国家税务总局洛阳市分局
  • 山西省税务局政审县级还是市级的
  • 南京税务举报
  • 高新企业人才落户北京
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设