VUE.js学习笔记--vue的事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。修饰符是由点(.)开头的指令后缀来表示的：

修饰符包括

.stop 阻止单击事件继续传播
.prevent 取消自身的默认操作，执行自定义方法
.capture 添加事件监听器时使用事件捕获模式，即元素自身触发的事件先在此处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数即事件不是从内部元素触发的
.once 点击事件将只会触发一次
.passive 滚动事件的默认行为 (即滚动行为) 将会立即触发而不会等待事件方法执行完成，这其中包含 event.preventDefault() 的情况
用事实说话：

.stop

我们接着上面的例子添加一个yanshi.vue组件

我们的模板里的button按钮外面包裹着两层div，而且三者都有监听点击事件，那么我们点击按钮的时候会怎样呢？：

依次向上冒泡传递事件

可以看出来点击按钮后三者都触发了点击事件，而且触发顺序是由里到外冒泡触发，很多时候我们肯定是不需要在一个按钮上触发其他的点击事件的，（当然流氓网页除外）原生的JS给我们提供了一些方法来解决如： event.stopPropagation(); 即我们可以这样：
用特殊变量 $event把它传入方法



aaTick(event){
   console.log("触发了button点击事件");
   event.stopPropagation(); 
}

通过event对象的stopPropagation()方法组织冒泡产生

阻止了冒泡

当然这样的解决方案是很不优雅的，vue给我们封装了修饰符来应对这种情况:

效果一样

也阻止了冒泡

.prevent

跳转到主页

我们增加一个标签，让它点击触发的时候跳转到欢迎主页面
但是我们不想让他跳转，我们想当我们点击标签的时候浏览器会打开一个新的tab选项卡来展示我们之前的欢迎页面，当前的选项卡不进行页面切换，就要用到.prevent修饰符啦

跳转到主页
ddTick(){
    console.log("a标签你还是太嫩了，我要自己来")
    window.open('http://localhost:8080/#/')
}

可以看到原来标签的跳转功能被封印了，执行了我们的ddTick()方法，所以.prevent修饰符的功能就是取消标签自身的默认操作，执行自己定义的方法。
注意：.prevent修饰符只能对 cancelable事件属性的事件起作用

cancelable 事件返回一个布尔值。如果用 preventDefault() 方法可以取消与事件关联的默认动作，则为 true，否则为 fasle。

(功能就是这么个功能，但总感觉用法怪怪的。。。如果有大神知道更深层次的用法希望可以留言指点一下~~)

.capture

这是捕获事件的修饰符，即有此修饰修饰的元素事件触发的优先级是最高的，例如开始咱们的冒泡例子

我们给第二层div增加capture修饰，当执行的时候会出现这样的情况：

可以看到优先触发了第二层的点击事件，然后才是对button按钮的点击事件，接着是对最外层div的冒泡事件。

.self

当我们将外面的两层

标签的事件监听加上.self修饰后再次点击按钮会发现

只触发了按钮的事件

只触发了button按钮自身的单击事件，可见 .Self只对点击到自己身上的事件才做出反应

.once

如果加上once修饰符，则事件只能触发一次。之后无论点击多少次都不再触发

.passive

passive这个修饰符会执行默认方法。你们可能会问，明明默认执行为什么会设置这样一个修饰符。这就要说一下这个修饰符的本意了。
【浏览器只有等内核线程执行到事件监听器对应的JavaScript代码时，才能知道内部是否会调用preventDefault函数来阻止事件的默认行为，所以浏览器本身是没有办法对这种场景进行优化的。这种场景下，用户的手势事件无法快速产生，会导致页面无法快速执行滑动逻辑，从而让用户感觉到页面卡顿。】
通俗点说就是每次事件产生，浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。我们加上passive就是为了告诉浏览器，不用查询了，我们没用preventDefault阻止默认动作。
这里一般用在滚动监听，@scoll，@touchmove 。因为滚动监听过程中，移动每个像素都会产生一次事件，每次都使用内核线程查询prevent会使滑动卡顿。我们通过passive将内核线程查询跳过，可以大大提升滑动的流畅度。

注意：换句话说也就是passive和prevent其实是相反的一个修饰符，prevent是阻止默认事件方法，执行自定义函数，而passive是一定执行默认事件方法（其他自定义方法也会执行）所以两者是冲突的，不可以同时使用，如果一起使用就会.prevent会失效，同时我们也会收获浏览器的一个警告。