html+css+js|Vue事件修饰符 javascript|前端|vue.js

目录

Vue当中的事件修饰符目的：
事件冒泡：
事件修饰符：
1.stop:
【html+css+js|Vue事件修饰符】2.prevent:
3.once:
4.capture:
5.self:
6.passive
键盘修饰

Vue当中的事件修饰符目的：

为了更纯粹的数据逻辑，vue提供了很多事件修饰符，来代替处理一些 DOM 事件细节。主要是用来和事件连用，决定事件出发的条件或者用来阻止事件的触发机制

事件冒泡：提到修饰符需要先介绍一下事件冒泡：

事件冒泡，当事件发生后，这个事件就要开始传播（从里到外或者从外到里）为什么要传播呢？. 因为事件源本身（可能）并没有处理事件的能力，即处理事件的函数（方法）并未绑定在该事件源上。. 例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身可能不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件），或者按钮的父级绑定有事件函数，当该点击事件发生在按钮上，按钮本身并无处理事件函数，则传播到父级去处理。

什么意思呢，举个例子：
我设定大的div里有一个点击事件，按钮有一个点击事件，但是点击小的div也会触发div点击事件，点击div里的按钮会触发两个事件，这就是事件冒泡，修饰符就是为了避免事件冒泡的

文章图片

代码：

#aa{width: 300px; height: 300px; background-color: red; } #app {width: 600px; height: 600px; background-color: green; }

事件修饰符：

.stop	阻止事件冒泡
.prevent	阻止标签的默认行为
.once	只触发一次，加上once之后prevent失效
.capture	捕获冒泡
.self	将事件绑定到自身，只有自身才能触发
.passive	不阻止事件的默认行为

怎么应用呢，就是在@click后面直接.修饰符就行:

用的是上方的样式，下面就只写html和输出结果了：
1.stop:

这样点击按钮不会触发aaClick和divClick
2.prevent:

百度一下

某些标签像a标签，他本身是拥有默认事件的，这些事件虽然是冒泡之后开始的，但是不会因为stop而停止，阻止类似于这种本身拥有默认事件的标签，就需要prevent来阻止标签的默认事件
3.once:

加上once修饰符之后事件只触发一次，但是once不影响事件的冒泡，上层事件仍然会触发，并且加上once的事件prevent会失效，页面刷新之后次数会被重置
连续点击的结果就是除了第一次会三个弹窗都出来，剩下的都只会出现除了按钮的另外两个弹窗
4.capture:

加上.capture修饰符的时候会先触发事件
点击按钮结果就是：先执行aaClick之后执行btnClick最后执行divClick
5.self:

只有自身才能触发
点击按钮结果就是：执行btnClick和divClick，跳过aaClick;
点击中间层aa结果：执行aaClick和divClick，他也不影响事件冒泡
6.passive .passive是2.3.0 新增的修饰符，是用来告诉浏览器你不想阻止事件的默认行为。
为什么需要告诉浏览器不阻止事件的默认行为？
简单来说，每次事件产生，浏览器都会去查询是否由preventDefault()阻止该次事件的默认动作。我们加上.passive是为了告诉浏览器，不用查询了，我们没有阻止。
所以说，.passive修饰符就是为了提升移动端的性能。在滚动监听，@scoll,@touchmove时，每次使用内核线程查询prevent会使滑动卡顿，使用.passive修饰符跳过内核线程查询，可以大大的提高流畅度。
键盘修饰顾名思义：就是通过键盘操作事件
用法和事件修饰符一样，举一个小栗子：