Vue学习从入门到精通（七）事件处理

今天我和大家一块来学习一下Vue中的事件处理。Vue.js的事件监听一般都通过v-on指令配置在HTML中，所有的Vue.js事件处理方法和表达式都严格绑定在当前视图的ViewModel上。实际上，采用Vue提供的v-on指令有如下几点好处：

通过查看HTML模版便能轻松定位JavaScript代码中对应的方法。
无需在JavaScript中手动绑定事件，ViewModel和DOM完全解耦，更易于测试。
当一个ViewModel被销毁时，所有的事件处理器都会自动被删除。

如何绑定事件

在Vue中主要采用内联方式来进行事件的绑定，就是在HTML文档中采用v-on指令来监听DOM事件，具体代码如下：

<div id="example">
<button v-on:click="say"></button>
</div>

其中say是一个js函数的名字。需要在Vue实例中进行定义。
需要注意的是：这种内联方式一个事件处理器只能绑定一个方法，如需绑定多个方法，仍需在JavaScript代码中使用addEventListener方法来绑定
除了在内联语句中绑定js方法外，对于一些简单的操作，也可以直接在内联语句中使用javaScript语句。不过事件处理器只能限制为一个js语句。具体代码如下：
　

 <button  v-on:click="count=count + 1">点击</button>

methods配置

Vue中js方法的定义都是放在methods属性下的。具体代码如下：

var vm = new Vue({
el:'#example',
method:{
    say:function(){
        alert('hello world')
    }
}
})

注意：

methods中定义的方法内的this始终指向创建的Vue实例。
与事件绑定的方法支持参数event即原生DOM事件的传入。
方法用在普通元素上时，只能监听原生DOM事件；用在自定义元素组件上时，也可以监听子组件出发的自定义事件（更多的可以查看组件，这个先暂时保留心中的疑问）

$event的应用

我们已经知道了在Vue实例中创建的方法需要访问原生的DOM事件时可以直接传入event来获取，如果在内联语句处理器中访问原生DOM事件时，则可以用一个特殊变量$event将其传入方法中，具体代码如下：

<button v-on:click:'say('jack',$event)'>点击</button>
//...
methods:{
say:function(msg,event){
//todo
}
}

事件修饰符

修饰符（modifiers）是以半角句号（.）开始的特殊后缀，用于表示指定签单应以特殊的方式绑定。目前Vue.js提供的事件修饰符如下：

.stop
.prevent
.capture
.self
.once
.passive

.stop

这个修饰符使用的场景如下：嵌套的标签如果都支持某一类型的响应，比如点击。如果内部标签有了自己独立的响应事件，那么响应完内部标签的事件后，不再向外部标签传播，外部的标签不再响应该类型的事件。具体代码实例如下：

没有加.stop时

<template>
    <div id="demo" @click="commonAlert">
        <button @click="alertA">内部标签</button>
    <br>
    <span>哈哈哈</span>
    </div>
</template>
<script>
    export default{
        name:'helloWorld',
        data(){
            return{
            }
        },
        methods:{
            commonAlert:function(){
                alert('外部标签通用事件')
            },
            alertA:function(){
                alert('内部标签指定事件')
            }
        }
    }
</script>

点击内部标签这个按钮，此时会弹出内部标签按钮弹框，点击确定后，然后弹出外表标签事件弹框。可以发现内部标签，外部标签的绑定事件都响应了，响应的顺序是由内到外。

使用.stop，具体代码如下：

<template>
    <div id="demo" @click="commonAlert">
        <button @click.stop="alertA">内部标签</button>
    <br>
    <span>哈哈哈</span>
    </div>
</template>
<script>
    export default{
        name:'helloWorld',
        data(){
            return{
            }
        },
        methods:{
            commonAlert:function(){
                alert('外部标签通用事件')
            },
            alertA:function(){
                alert('内部标签指定事件')
            }
        }
    }
</script>

运行代码后进行操作，和我们的预期一致，点击内部标签按钮只响应与之绑定的事件，点击哈哈哈标签响应了外部标签绑定的事件。

.prevent

在事件处理器中经常需要调用event.preventDefault()来阻止事件的默认行为，Vue.js提供了.prevent事件修饰符可以完成这个操作。我们都知道<a></a>标签的默认行为是网页的跳转，但是我们可以通过.prevent来禁止网页的跳转，具体代码如下：

<template>
    <div id="demo">
        <a href="https://www.baidu.com" @click.prevent="preventWebJump">百度一下</a>
    </div>
</template>
<script>
    export default{
        name:'helloWorld',
        data(){
            return{
            }
        },
        methods:{
            preventWebJump:function(){
                alert('禁止网页跳转')
            }
        }
    }
</script>

运行代码后，我们点击跳转发现无法跳转了，会弹框给我们提示禁止网页跳转，可以看到<a>的默认行为被禁止了。

.capture

即给元素添加一个监听器，当元素发生冒泡时什么是元素冒泡？，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。
我们不使用.captue时，示例代码如下：

<template>
    <div id="demo" @click="alertA">
    <div @click="alertB">
        <div @click="alertC">测试</div>
    </div>  
    </div>
</template>
<script>
    export default{
        name:'helloWorld',
        data(){
            return{
            }
        },
        methods:{
            alertA:function(){
                console.log('A')
            },
            alertB:function(){
                console.log('B')
            },
            alertC:function(){
                console.log('C')
            },
        }
    }
</script>

运行结果如下：
这里写图片描述

假如我们都使用.capture，示例代码如下：

<template>
    <div id="demo" @click.capture="alertA">
    <div @click.capture="alertB">
        <div @click.capture="alertC">测试</div>
    </div>  
    </div>
</template>
<script>
    export default{
        name:'helloWorld',
        data(){
            return{
            }
        },
        methods:{
            alertA:function(){
                console.log('A')
            },
            alertB:function(){
                console.log('B')
            },
            alertC:function(){
                console.log('C')
            },
        }
    }
</script>

运行结果如下：
这里写图片描述

.self

关于.stop和.self的区别。前者是防止时间冒泡，后者则是忽略了事件冒泡和事件捕获的影响。只有直接作用在该元素上的事件才会被调用。
为了验证.stop和.self的区别。示例代码如下：

<template>
    <div id="demo" @click="alertA">
    <div @click.self="alertB">
        <div @click="alertC">测试</div>
    </div>  
    </div>
</template>
<script>
    export default{
        name:'helloWorld',
        data(){
            return{
            }
        },
        methods:{
            alertA:function(){
                console.log('A')
            },
            alertB:function(){
                console.log('B')
            },
            alertC:function(){
                console.log('C')
            },
        }
    }
</script>

运行结果如下：
这里写图片描述
我们发现使用了.self的标签。忽略了冒泡事件的影响，同时该标签内嵌的标签仍然受冒泡事件的影响。该标签外部的标签仍然受冒泡事件的影响

使用.stop的代码如下：

<template>
    <div id="demo" @click="alertA">
    <div @click.stop="alertB">
        <div @click="alertC">测试</div>
    </div>  
    </div>
</template>
<script>
    export default{
        name:'helloWorld',
        data(){
            return{
            }
        },
        methods:{
            alertA:function(){
                console.log('A')
            },
            alertB:function(){
                console.log('B')
            },
            alertC:function(){
                console.log('C')
            },
        }
    }
</script>

运行结果如下：这里写图片描述

可以看到使用了.stop标签外部的标签已经不再受到冒泡事件的影响了。内嵌的标签依然可以收到冒泡事件的影响。

.once

这个主要是要求函数只执行一次。比较简单，这里就不写源码了。

.passive

.passive 修饰符尤其能够提升移动端的性能。不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

更多优质文章，可以微信扫码关注：
这里写图片描述