Vue事件修饰符

目录

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

事件冒泡：

事件修饰符：

1.stop:

2.prevent:

3.once:

4.capture:

5.self:

6.passive

键盘修饰

---

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

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

事件冒泡：

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

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

什么意思呢，举个例子：

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

 

代码：

    

        按钮
    

事件修饰符：

.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修饰符跳过内核线程查询，可以大大的提高流畅度。

键盘修饰

顾名思义：就是通过键盘操作事件

用法和事件修饰符一样，举一个小栗子：

 这样就可以通过回车来进行操作了

都有哪些键盘修饰符呢：

• .enter---------回车
• .tab------------tab键
• .delete--------包含delete和backspace和小键盘关闭的小键盘的.
• .esc------------返回键
• .space---------空格键
• .up--------------向上键
• .down----------向下键
• .left--------------向左键
• .right------------向右键