工作日记：javaScript-事件修饰符（.prevent .stop .once .capture .self）

① .prevent

作用：阻止浏览器的默认事件

默认事件：移动端浏览器的下拉刷新事件、点击超链接会跳转页面.......

② .stop

作用：阻止冒泡事件

冒泡事件：子元素的事件传递到父元素，即你促发子元素的click事件，由于冒泡，会使外层的父元素的click事件同时促发

③ .once

作用：事件指促发一次

④ .capture

作用：打乱冒泡顺序（即可以理解为给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。）

捕获模式：当发生click事件时，浏览器会从最外层元素向触发click事件的内部元素进行事件传播，即可以简单的理解为 父元素传递到子元素

⑤  .self

作用：阻止自身事件促发，但不会阻止冒泡

<div class="outer" @click="outer"> 
　　<div class="middle" @click.self="middle"> 
　　　　<button @click="inner">点击</button>
    </div>
</div> 

如上，当我们点击button的时候，先执行inner，传递到middle，此时middle里有一个.self，.self阻止了middle的click事件，所以继续冒泡到outer，执行outer的click事件。

结果：执行click事件的顺序：inner ----> outer