vue之事件修饰符的使用

vue中可以使用 v-on 指令绑定事件监听器，监听 DOM 事件，而在事件处理的程序中，为了能有更纯粹的数据逻辑，vue还提供了很多事件修饰符，来代替处理一些 DOM 事件细节。

我的其他文章，也可以了解一下：
【使用vue-cli（vue脚手架）快速搭建项目】：https://www.jianshu.com/p/1ee1c410dc67
【vue之父子组件间通信实例讲解（props、ref 、 emit ）】：
https://www.jianshu.com/p/91416e11f012
【vue之将echart封装为组件】：
https://www.jianshu.com/p/ec39019e2141
【理解vue实例的生命周期和钩子函数】：
https://www.jianshu.com/p/98517bd49179

事件修饰符：

.stop：防止事件冒泡，等同于JavaScript中的event.stopPropagation()
.prevent：防止执行预设的行为，等同于JavaScript中的event.preventDefault()
.capture：捕获冒泡
.self：将事件绑定到自身，只有自身才能触发
.once：只触发一次
.passive：不阻止事件的默认行为

（1）.stop

防止事件冒泡，通俗来说就是阻止事件向父元素传递，阻止任何父事件处理程序被执行，等同于JavaScript中的event.stopPropagation()。看看下面这个例子：

<!-- HTML -->
<div id="demo">
    <div @click="outer" style="padding: 20px;background-color:deepskyblue">
    　　<div  @click="middle" style="padding: 10px;background-color: darkcyan">
    　　　　　　<button @click="inner">click</button>
    　　</div>
    </div>
</div>

<!-- JS -->
    var demo = new Vue({
        el: '#demo',
        methods: {
            inner: function () {
                console.log ('(1)inner')
            },
            middle: function () {
                console.log ('(2)middle')
            },
            outer: function () {
                console.log ('(3)outer')
            }
        }
    })

这个例子中，在button标签外包了两层div，每层都绑定了监听器，监听click事件，这时候我们点击最内层的按钮，你从控制台可以看见，外面两层对应的点击事件也被触发了。

image.png

那如果我们给最内层按钮的事件绑定加上stop修饰符，像如下修改，就不会向上冒泡了

   <button @click.stop="inner">click</button>

image.png

（2）.prevent

某些标签拥有自身的默认事件，比如<a>标签点击后会进行页面的跳转。这类默认事件虽然是冒泡后开始的，但不会因为stop而停止执行。阻止执行这类预设的行为，.prevent就派上用场了。

 <a href="http://www.baidu.com" @click.prevent>点击跳转</a>

试试上面这个小例子，你会发现点击<a>标签的时候，不会再发生跳转了。

（3）.capture

捕获冒泡，即冒泡发生时，有.capture修饰符的dom元素会优先执行。我们还是用回stop时候的例子，正常情况下点击最内层按钮，控制台打印的信息是这样的：

image.png

我们稍作改变，将中间层的点击事件加上.capture修饰符

    <div @click="outer" style="padding: 20px;background-color:deepskyblue">
    　　<div @click.capture="middle" style="padding: 10px;background-color: darkcyan">
    　　　　　　<button @click="inner">click</button>
    　　</div>
     </div>

这时候打印顺序发生改变了，中间层的信息被优先打印出来，然后再按正常顺序执行触发的事件

image.png

那多个.capture修饰符的时候呢？

    <div @click.capture="outer" style="padding: 20px;background-color:deepskyblue">
    　　<div @click.capture="middle" style="padding: 10px;background-color: darkcyan">
    　　　　　　<button @click="inner">click</button>
    　　</div>
    </div>

image.png

结果是，带修饰符的从外到内依次执行，然后再按正常顺序执行触发的事件。

（4）.self

将事件绑定到自身，只有自身才能触发，通常用于避免冒泡事件的影响。

<!-- HTML -->
<div id="demo">
    <div @click="outer" style="padding: 20px;background-color:deepskyblue">
    　　<div  @click.self="middle" style="padding: 10px;background-color: darkcyan">
    　　　　　　<button @click="inner">click</button>
    　　</div>
    </div>
</div>

<!-- JS -->
    var demo = new Vue({
        el: '#demo',
        methods: {
            inner: function () {
                console.log ('(1)inner')
            },
            middle: function () {
                console.log ('(2)middle')
            },
            outer: function () {
                console.log ('(3)outer')
            }
        }
    })

给中间的div加上self修饰符，然后点击里层的按钮，发现中间层的事件没有被触发，直接跳过了：

image.png

而直接点深色部分，即中间层div对应的区域，才能触发其事件：

image.png

（5）.once

这个比较好理解，加上once修饰符以后事件只触发一次，但是不影响事件的冒泡，上层的事件仍然会被触发，并且页面刷新后这个次数会重置。下面是不停点击按钮的效果：

 <div @click="outer" style="padding: 20px;background-color:deepskyblue">
    　　<div @click="middle" style="padding: 10px;background-color: darkcyan">
    　　　　　　<button @click.once="inner">click</button>
    　　</div>
    </div>

image.png

（6）.passive

.passive是2.3.0 新增的修饰符，是用来告诉浏览器你不想阻止事件的默认行为。

这里涉及到一个问题，为什么需要告诉浏览器不阻止事件的默认行为？
原因是这样的，浏览器只会在每次触发监听器的时候，才去判断这次是否有调用preventDefault()来阻止默认行为。这样的判断，在某些场景下会影响交互，像用户通过手势滑动页面时，就没法迅速滚动了，而使用.passive就可以提前告诉浏览器，我们没有用preventDefault阻止默认动作，你也不用反复去判断了，从而提高性能解决卡顿。