Vue|事件处理、事件修饰符（详细）前端|vue.js|javascript

目录

一、事件处理

二、事件修饰符
【Vue|事件处理、事件修饰符（详细）】1.prevent 阻止默认事件（常用）
2.stop：阻止事件冒泡（常用）
3.once：事件只触发一次（常用）

4.capture：使用事件的捕获模式

5.self：只有event.target是当前操作的元素时才出发的事件
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕
三、键盘事件
事例
?编辑
1.Vue中最常用的案件别名：

一、事件处理事件的基本使用：
使用v-on：xxx 或 @xxx绑定事件，其中xxx是事件名
事件的回调需要配置在methods对象中，最终会在vm上
methods中配置的函数，不用箭头函数！否则this就不是vm了
methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象
@click="demo" 和 @click=“demo（$event）”效果一致，但后者可以传入参数

初识vue - 锐客网欢迎来到{{name}}学习

二、事件修饰符 1.prevent 阻止默认事件（常用）

欢迎来到{{name}}学习点我提示信息

在我们之前学过的标签中，如果我们在页面中点击a标签所呈现出来的效果，我们的页面立马会跳转到href页面，但是我们可以阻止其页面跳转

文章图片

出现下面这个页面，当我们点击确定之后，发现页面并没有跳转

2.stop：阻止事件冒泡（常用）

正常情况下，当我们点击按钮的时候会出现两次弹窗（就我们上面这个代码而言），但是在实际操作中并没有出现两次弹窗（冒泡），原因就是@click.stop。当我们使用时，就阻止事件冒泡，我们点击按钮时，仅仅会出发按钮的弹窗，并不会触发div的弹窗。

3.once：事件只触发一次（常用）

我们单击按钮的时候，通常情况下不论我们点击几次，都会出现弹框，但是当我们加了@click.once之后，这个按钮只能单击一次，第二次及其以后不再出现弹窗
4.capture：使用事件的捕获模式

div1div2

正常情况下，是先捕获再冒泡，例如上面正常的代码中先捕获box1再捕获box2，之后box2冒泡再box1冒泡，控制台上先输出2再输出1
但是我们添加了@click.capture之后，我们会发现当我们在捕获box1的时候，也完成了box1的冒泡，最终控制台上的输出内容是先1再2
5.self：只有event.target是当前操作的元素时才出发的事件

正常情况下不加.self的时候，当我们单击按钮，会打印出两个

文章图片

当我们添加.self的，我们再点击按钮，只会出现一个，那就是按钮所绑定的函数运行，上面那个div便不会再运行（这个.self也可以说变相的阻止了冒泡）

文章图片

6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕下面这个，只要滚动条动，就能触发函数

文章图片

下面这个，只要鼠标的滚轮动，就能触发函数
触发流程：先滚动滚轮-->触发demo函数--->demo函数完成后再触发滚动条滚动效果

文章图片

在我们下面这个代码后加了passive，当我们的demo函数没有执行完时，滚轮也会滑动

文章图片

三、键盘事件事例

初识vue - 锐客网欢迎来到{{name}}学习

文章图片

1.Vue中最常用的案件别名：回车enter
删除delete（捕获“删除delete”和“退格backspace”键）
退出esc
空格space
换行tab （特殊，必须配合keydown去使用，@keydown.tab）
上up
下down
左left
右right
Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转化为kebab-case（短横线命名，两个不同的单词之间用短横线连接）

系统修饰键（用法特殊）：ctrl、alt、shift、meta（win键）
①配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
②配合keydown使用：正常触发事件