Vue事件

一、事件的基本使用

(一)触发事件不传参

事件的基本语法:

v-on : 事件 = "事件触发函数" 或 @事件 = "事件触发函数"

事件

我们以click时间为例:点击button按钮,弹窗"你好呀!"

(二)触发事件传参

我们在触发事件时想要传递参数可以直接在时间触发函数后面传递参数:

传入参数$event相当window对象中的e对象,包含操作对象的信息。

二、事件修饰符

(一)prevent阻止默认事件

加修饰符前:点击a标签先执行showInfo函数,再跳转至主页。

加修饰符后:点击a标签执行showInfo函数,页面不跳转。

(二)stop阻止事件冒泡

加修饰符前:点击div2执行showInfo函数,冒泡到div1身上再次执行showInfo函数。

加修饰符后:点击div2执行showInfo函数,不会冒泡到div1身上。

(三)once事件只触发一次

加修饰符前:点击一次button按钮触发一次showInfo函数。

加修饰符后:第一次点击button按钮触发showInfo函数,之后再点不会触发showInfo函数。

(四)capture使用事件捕获模式

加修饰符前:点击div2先执行showInfo(2)函数,再执行showInfo(1)函数。

加修饰符后:点击div2先执行showInfo(1)函数,再执行showInfo(2)函数。

(五)self只有event.target是当前对象才触发是事件

加修饰符之前:点击div2先执行showInfo(2)函数,再执行showInfo(1)函数。

加修饰符之后:点击div2执行showInfo(2)函数,但是不执行showInfo(1)函数;只有点击div1时才执行showInfo(1)函数。

(六)passive立即执行事件默认行为

加修饰符前:触发滚轮只有等demo函数中的代码执行完成后滚动条才会向下滚动。

加修饰符后:触发滚轮后滚动条直接向下滑动,无需demo函数执行完毕。

三、键盘事件

(一)常见的键盘事件

键盘事件语法格式如下:

@keydown.按键 = "事件回调函数" 或

@keyup.按键 = "事件回调函数"

Vue中常用的键盘事件别名:

回车 => enter

删除 => delete("删除"和"退格"键)

退出 => esc

空格 => space

换行 => tab (特殊,必须配合keydown使用)

上 => up

下 => down

左 => left

右 => right

如果想要使用除常用键盘事件别名以外的按键,可以使用e.key来进行配置

(二)系统修饰键的特殊用法

系统修饰按键:ctrl 、alt 、shift 、meta

  1. 配合keyup使用:按下修饰键的同时,再按下其他按键,随后释放其他修饰键,事件才被触发。

  2. 配合keydown使用:正常触发事件。

四、补充

(一)事件修饰符连用

如下代码中,点击a标签即阻止事件默认行为,又阻止事件冒泡。

(二)按下一个键+另一个键触发事件

如下代码中,按下Ctrl再按下y才触发showInfo函数

相关推荐
还有你Y2 小时前
Shell 脚本语法
前端·语法·sh
踩着两条虫4 小时前
如何评价VTJ.PRO?
前端·架构·ai编程
Mh5 小时前
鼠标跟随倾斜动效
前端·css·vue.js
小码哥_常6 小时前
Kotlin类型魔法:Any、Unit、Nothing 深度探秘
前端
Web极客码7 小时前
深入了解WordPress网站访客意图
服务器·前端·wordpress
幺风7 小时前
Claude Code 源码分析 — Tool/MCP/Skill 可扩展工具系统
前端·javascript·ai编程
vjmap7 小时前
唯杰地图CAD图层加高性能特效扩展包发布
前端·gis
ZC跨境爬虫7 小时前
3D 地球卫星轨道可视化平台开发 Day7(AI异步加速+卫星系列精简+AI Agent自动评论)
前端·人工智能·3d·html·json
ID_180079054738 小时前
淘宝 API 上货 / 商品搬家 业务场景实现 + JSON 返回示例
前端·javascript·json
M ? A8 小时前
Vue 动态组件在 React 中,VuReact 会如何实现?
前端·javascript·vue.js·经验分享·react.js·面试·vureact