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

相关推荐
夏幻灵4 分钟前
CSS三大特性:层叠、继承与优先级解析
前端·css
小杨同学呀呀呀呀21 分钟前
Ant Design Vue <a-timeline>时间轴组件失效解决方案
前端·javascript·vue.js·typescript·anti-design-vue
qq_5324535325 分钟前
使用 Three.js 构建沉浸式全景图AR
开发语言·javascript·ar
华玥作者9 小时前
[特殊字符] VitePress 对接 Algolia AI 问答(DocSearch + AI Search)完整实战(下)
前端·人工智能·ai
Mr Xu_9 小时前
告别冗长 switch-case:Vue 项目中基于映射表的优雅路由数据匹配方案
前端·javascript·vue.js
前端摸鱼匠9 小时前
Vue 3 的toRefs保持响应性:讲解toRefs在解构响应式对象时的作用
前端·javascript·vue.js·前端框架·ecmascript
sleeppingfrog9 小时前
zebra通过zpl语言实现中文打印(二)
javascript
lang201509289 小时前
JSR-340 :高性能Web开发新标准
java·前端·servlet
好家伙VCC10 小时前
### WebRTC技术:实时通信的革新与实现####webRTC(Web Real-TimeComm
java·前端·python·webrtc
未来之窗软件服务11 小时前
未来之窗昭和仙君(六十五)Vue与跨地区多部门开发—东方仙盟练气
前端·javascript·vue.js·仙盟创梦ide·东方仙盟·昭和仙君