Vue2.0笔记——事件对象，事件冒泡，默认行为及键盘事件

事件对象

关于事件即v-on在指令中已经介绍过，@简写也说过,就不再说明如何声明使用了。
我们可以在调用事件方法是为方法添加参数 $event,表示一个事件实例。
在处理方法中，得到这个实参，可通过这个对象获得一些方法和作用。

<div id="app">    <button @click="clickPrint($event,'你好')">点击，事件对象</button></div>methods:{            clickPrint(e,str){                console.log(str);                console.log(e);                console.log(e.type);                console.log(e.target);//获得事件的目标对象DOM            }}

如果有多个参数，那么将$event设置为第一个参数。

事件冒泡

当事件发生后，这个事件就要开始传播(从里到外或者从外向里)，如何阻止事件冒泡，在js中是通过stopPropagation()方法来阻止事件冒泡的。

<div id="app">        <div @click="printD()">            <p @click="printP()">                <button @click="clickPrint($event,'你好')">点击，事件对象</button>            </p>        </div>    </div>

此时将会出现向上冒泡情况。
只需在触发事件的指令后添加修饰符.stop

<button @click.stop="clickPrint($event,'你好')">点击，事件对象</button>

默认行为

阻止默认行为，在js中调用event.preventDefault(),在Vue中，添加修饰符.prevent

<a href="http://www.baidu.com" target="_blank" @click.stop="study">链接</a>

此时添加.stop将不会链接到百度的主页面。
当然也可以通过串联的方式

<a href="http://www.baidu.com" target="_blank" @click.stop.prevent="study">链接</a>

还有，如：.once，只触发一次事件

<button v-on:click.once="clickOnce()">该事件只触发一次</button>

键盘事件

{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
键盘事件有@keydown,@keypress,@keyup

案例:

<div id="app">        <input type="text" name="username" @keydown="show($event)"/><br/>        <input type="text" name="name" @keydown.enter="print($event)"/><br/>        <input type="text" name="one" @keydown.up="print($event)"/><br/></div>methods:{    show(e){        console.log(e.target.value);    },    print(e){        console.log(e.keyCode);    }}

我们运行这个例子，第一个文本框中，每更改一次文本值就会触发一次事件
第二个文本框中，无论如何更改，只要按下enter键才能触发事件，这个.enter是内置的。下面的.up也是内置的，还可以使用keyCode值,如13是enter，使用.13也可以代表enter。
还有许多内置的，可以一一试试，也可以自定义全局的。

全局配置keyCodes

类型：{ [key: string]: number | Array<number> }
key为string类型，职位number类型或number类型的数组。
全局的，要定义在Vue实例外面

Vue.config.keyCode={    a:65,    space:32}<input type="text" name="add" @keydown.space="print($event)"/><input type="text" name="add" @keydown.a="print($event)"/>

一般我们定义的这些，如果是可输出字符的键的话，就会先触发事件再输出这个字符。
配置全局的语法都是Vue.config.xxx，不只有keyCodes，还有很多。
全局配置

还有其他修饰符

• .stop     - 调用 event.stopPropagation()。

• .prevent  - 调用 event.preventDefault()。

• .capture - 添加事件侦听器时使用 capture 模式。

• .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

• .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

• .native - 监听组件根元素的原生事件。

• .once - 只触发一次回调。

• .left - (2.2.0) 只当点击鼠标左键时触发。

• .right - (2.2.0) 只当点击鼠标右键时触发。

• .middle - (2.2.0) 只当点击鼠标中键时触发。

• .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
  更多，需要查看官网v-on指令事件描述