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函数

相关推荐
传人once7 小时前
页面中心圆圈放大效果如何写
开发语言·javascript·ecmascript
用户033307413957 小时前
TypeScript using 与 AsyncDisposableStack:在真实服务端代码中协调多资源清理
前端
web3d5207 小时前
Vue3 地图白屏排查清单:容器、弹窗与 ol-viewport 重复创建
vue.js·gis
daisychey7 小时前
用 Playwright 做多平台内容分发,我踩过的 8 个坑
前端
IT_陈寒9 小时前
为什么你应该学习JavaScript?
前端·人工智能·后端
大龄秃头程序员9 小时前
iOS冷启动监控Demo
前端
光影少年9 小时前
为什么 JavaScript 中 0.1 + 0.2 !== 0.3,如何让其相等?
前端·javascript·算法
掘金酱9 小时前
[稀土掘金 × 火山引擎] AI用量周榜冲刺赛|获奖名单公示
前端·人工智能·后端
泡泡oO10 小时前
“如果你还在用Superpowers,那我不要和你说话”
前端·后端·全栈
维克兜率天10 小时前
趋势过滤:避免被“假突破“反复打脸
前端