2019年4月15日

一.开场白

同学们你们好，又见面了。今天我们要讲讲Vue的事件处理器，从今天开始到之后的时间，我会一点一点的讲解Vue里面的各种细节。当然了，最好的文档就是官网的文档，所以我们根据官网的Vue.js的教程来看一看我们今天要讲解的事件处理的内容。

二.监听事件

什么是监听事件呢？我相信大家应该都知道什么算是监听，比如单击按了一下什么，电脑端的键盘按键按了一下什么，这些都可以算是事件，而程序通过监听可以对其进行一些程序的处理响应。那么在使用vue之前，我们可以进行的监听有的时候直接是在HTML里面写，比如：
<input type="button" value="clickMe" onclick="调用内容">
还可以绑定DOM对象属性进行一个监听，比如：
document.getElementById("xxx").onclick=test;
还有一些比如：
var test1 = document.getElementById("test1");
test1.addEventListener("click",function(){
//do something........
})
或者function的地方直接填上自己定义好的函数。当然了监听的方法不只是这些用法，还有很多大家可以自己去探索。那么让我们的主角登场一下，那就是所谓的Vue，如果用了Vue怎么监听呢？Vue官方文档上说明了，可以用v-on指令监听DOM事件，并在触发时运行一些JavaScript代码。什么意思呢，就是指本来是上面写的各种方法或者一些其他的方法，用了vue后，大家可以直接这样使用，如下：
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
上面代码运行的结果是，每当按钮点击一次，那么click里面的内容就会处理一次，而处理的内容可以写表达式，也可以传递方法。比如下列写的代码，就可以进行处理方法：
<div id="example-2">
<button v-on:click="greet">Greet</button>
</div>

new Vue({
   el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
同学们可以把上面的代码copy到自己的IDE里面进行一下测试，看到了吗？用Vue后可以用v-on进行一个监听事件的行为。当然了，你在上面的方法中可以进行一个参数的传递，比如:
<button v-on:click="greet('hi blackleft')">Greet</button>
//do something
...
...
...
methods:{
   greet:function(value){
       alert(value);//输出传递进来的hi blackleft
   }_
}
//do something
...
...
...
这就是我们的基本的监听事件。

三.我们来一起看一看事件修饰符

事件修饰符呢是什么，我们来看一看官方给出的内容，“在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation()是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js为v-on提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。”。
我们可以怎么简单的理解呢？也就是以往我们对DOM操作时呢，会对一些事件进行一些处理。一般是通过JavaScript进行一个处理，我们可以进行一个处理比如：
<li id='ul-a' onclick='alert("li");event.stopPropagation()'>a</li>
我们看到了上面的代码，在onclick里面再添加一个event.stopPropagation(),这样就可以阻止冒泡（如果不明白什么是冒泡，那么继续往下看，后面会大致的讲解什么叫做冒泡）等等其他的一些操作…………还有一些其他的操作，可以对监听事件进行一些操作，比如阻止默认行为的preventDefault如下：
<a href="http://www.baidu.com/" id="testA" >跳转百度的链接测试</a>
然后再通过JavaScript进行阻止默认行为
var a = document.getElementById('testA');
a.onclick = function(event){
event.preventDefault();
}
这样子处理后就可以阻止默认的行为了，也就是A标签不能够跳转了，阻止了默认的跳转行为。那么通过Vue呢？我们就解决了这个问题，决绝了什么问题？解决了这么多操作DOM的问题，让我们的方法只有纯粹的数据逻辑，而不需要处理DOM事件细节。我们先看一下有哪些修饰符。
.stop、.prevent、.capture、.self、.once、.passive
目前总共有这么多，别着急，我一一的给大家讲解。stop可以阻止事件继续传播，什么意思呢？我们根据代码来一起看一看:
<div id="test_on_xiushi">
<div v-on:click="greet">
<button v-on:click="test">BUTTON</button>
</div>
</div>
此时，我们没有加上任何的事件修饰符，然后看一看JavaScript中的代码：
var test_on_xiushi = new Vue({
el:'#test_on_xiushi',
methods:{
greet:function(){
alert('这是greet');
},
test:function(){
alert('这是test');
}
}
})
同学们可以测试一下，结果就是，当你点击BUTTON的时候，一下子处理了两个函数，test先调用，然后接着是greet函数调用，这就是所谓的冒泡。而我们如果在BUTTON的click后面写上修饰符.stop，如下：
<div id="test_on_xiushi">
<div v-on:click="greet">
<button v-on:click.stop="test">TEST</button>
</div>
</div>
注意，JavaScript的代码和上面的一样。接着我们再进行测试会发现，当你点击TEST这个按钮的时候，只会处理test函数而不会处理greet函数。
接着我们继续看prevent，其实这个就是阻止事件的默认行为，比如一个a标签，然后用到了prevent的时候就不会跳转了。测试代码就不放了，接着说一下我们的capture修饰符，它其实就是元素自身触发的事件先在此处理，然后才交由内部元素进行处理。这段话是vue官网介绍的，那么我们可以怎么简单的理解呢？其实就是可以理解成，在一层一层的这个嵌套中，进行同样的事件处理的时候先处理capture修饰过的。如下代码：
<div id="demo_capture">
<div id="obj1" v-on:click.capture="doc">
obj1
<div id="obj2" v-on:click.capture="doc">
 obj2
<div id="obj3" v-on:click="doc">
  obj3
<div id="obj4" v-on:click="doc">   obj4
<div id="obj5" v-on:click.capture="doc">
obj5
</div>
</div>
</div>
</div>
</div>
</div>
嵌套的层级是这样的
obj1->obj2->obj3->obj4->obj5从左向右的这样嵌套，它们都调用一个相同的方法，用capture修饰的有obj1\obj2\obj5，它们会怎么来处理呢？那就是先处理obj1接着 obj2再接着obj5之后呢，那就是obj4然后obj3，有同学发现了，如果是capture修饰的那么就是先处理最外层的，对没错，如果capture的都处理完了后呢，也就是从内部开始往外处理，处理什么呢？处理那些没有被capture修饰过的内容，所以我们可以这样看如果有capture那么就是，从最外层然后处理到内层，接着处理没有capture的就是从内层处理到外层。
经过测试可以看出来，不管点击哪里，都是这样子进行一个处理。
接着我们继续看一下.self，这个修饰就是不管什么只有当再event.target是当前元素自身时触发处理函数，不然就不会触发函数。代码我们就不写了，接着我们继续看一下.passive修饰符的，再Vue中的2.3.0中新增了passive，官方也说明了，这个时对应addEventListener中的passive选项提供的，那么再addEventListener中的passive是干什么的呢？根据MDN官方的回答说是，passive是一个布尔值，如果是真值，那么标识指定的处理的函数永远不会进行一个阻止默认的行为。有人可能脑海中想不到是什么，那么我们看一下具体的内容：
addEventListener()的语法内部是
target.addEventListener(type,listener[,options])这只是其中的一个，这个就是和我们的passive相关的一个。type是侦听的事件类型，listener是处理的内容，options是可选择的，可以写也可以不写。如果写，其中的一项就是passive。那么在Vue中怎么用呢？如下：


<div v-on:scroll.passive="onScroll">...</div>//这是官方的例子.
tips：不要把.passive和.prevent一起使用，因为.prevent将会被忽略，同时浏览器可能会向你展示一个警告。简而言之就是不要这两个一起用就行了。

四.最后一部分——按键修饰符

这一部分我就简单的讲一下吧，这个其实就是对PC端时对按键的监听，那么我们看一个例子：
<input v-on:keyup.enter="submit">//submit是一个自己定义好的函数
当按到“Enter”键的时候就会自动处理函数。一般这样用就行了，还有一些别的按键名称比如
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
而在2.5.0的Vue中还新增了一个.exact修饰符，就是精确的让你确定是设定成什么按键，（官方例子）：

<button @click.ctrl="onClick">A</button>

<button @click.ctrl.exact="onCtrlClick">A</button>

<button @click.exact="onClick">A</button>
这三个地方仔细看有一些区别，比如第一个和第二个，第二个多了exact的修饰符，而第一个没有，那么第一个的话是什么意思呢，就是因为没有exact修饰符，看代码好像是需要按ctrl才可以执行，实际上是不管怎么按按键，只要其中有一个是ctrl那么就可以执行函数，这样就不怎么精确了。不过有的时候可能不会对我们要提供的功能有什么大的影响。那么如果添加了呢，那就是如上所说，只有按ctrl且只按了ctrl按键的时候才会执行，如果没有写修饰符的时候那么就是没有写过修饰符一些按钮一按下去，不管按几个，1个也好2个也好多个也好，都会触发这个函数。

五.我们为什么用v-on

根据官方的说法，“扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法”、“因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel代码可以是非常纯粹的逻辑，和DOM完全解耦，更易于测试”、“当一个ViewModel被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们”，这三部分你可以简单的去理解，第一个就是让你的代码简介容易找到对应的位置，第二个就是我们不需要对DOM进行一个细致的操作，只需要对数据逻辑进行一个处理就可以了，我们需要操心的东西少了，或者说你需要写的代码也少了。最后一个也就是当我们的实例化出来的Vue对象只要被销毁的时候，那么这些会消耗性能的东西都会自动地删除，所以省去了我们对一些最最最基本优化地操作。

以上就是我们这一次讲地内容，希望大家能够多多提出自己的意见和见解。

本内容纯原创，转载请标明出处————————————作者：BLackLeft 日期：2019年4月15日16点32分

BlackLeft老师讲课了——Vue的事件处理