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

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

    点击，事件对象methods:{            clickPrint(e,str){                console.log(str);                console.log(e);                console.log(e.type);                console.log(e.target);//获得事件的目标对象DOM            }}

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

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

                                    点击，事件对象            
            

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

点击，事件对象

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

链接

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

链接

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

该事件只触发一次

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

案例:

        
        
        
methods:{    show(e){        console.log(e.target.value);    },    print(e){        console.log(e.keyCode);    }}

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

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

Vue.config.keyCode={    a:65,    space:32}

一般我们定义的这些，如果是可输出字符的键的话，就会先触发事件再输出这个字符。
配置全局的语法都是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指令事件描述