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

相关推荐
像风一样自由202012 分钟前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem1 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊1 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术1 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理1 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing1 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止2 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall2 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴2 小时前
简单入门Python装饰器
前端·python
袁煦丞2 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作