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 小时前
OpenClaw入门:从零开始搭建你的私有化AI助手
前端·架构·github
吴仰晖4 小时前
使用github copliot chat的源码学习之Chromium Compositor
前端
1024小神4 小时前
github发布pages的几种状态记录
前端
不像程序员的程序媛6 小时前
Nginx日志切分
服务器·前端·nginx
Daniel李华6 小时前
echarts使用案例
android·javascript·echarts
北原_春希6 小时前
如何在Vue3项目中引入并使用Echarts图表
前端·javascript·echarts
JY-HPS6 小时前
echarts天气折线图
javascript·vue.js·echarts
尽意啊6 小时前
echarts树图动态添加子节点
前端·javascript·echarts
吃面必吃蒜6 小时前
echarts 极坐标柱状图 如何定义柱子颜色
前端·javascript·echarts
O_oStayPositive6 小时前
Vue3使用ECharts
前端·javascript·echarts