事件处理

1.监听事件

v-on指令监听DOM事件

2.事件处理器

<!-- $event作为第一个参数默认传入 -->
<button @click="funClick"></button>
<button @click="funClick()"></button>
<!-- 特殊变量$event传入原生DOM事件 -->
<button @click="funClick($event)"></button>

var app = new Vue({
    el: "#app",
    methods: {
        funClick: function (event) {
            alert("hello");

            if(event){
                alert(event.target.tagName);
            }
        }
    }
});

3.事件修饰符

为避免显示调用event.preventDefault()等方法，让事件处理方法保持纯粹逻辑，v-on提供了以下修饰符

• stop
• prevent
• capture
• self
• once(事件只触发一次)

<!-- 阻止冒泡 -->
<a @click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form @submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a @click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form @submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div @click.capture="doThis"></div>
<!-- 只当事件在该元素本身（比如不是子元素）触发时触发回调 -->
<div @click.self="doThat"></div>

串联修饰符要注意顺序，因为相应的代码会以同样的顺序生成

4.键盘修饰符

为监听键盘事件，v-on:key提供了keyCode和以下按键别名

• enter
• tab
• delete
• esc
• space
• up
• down
• left
• right

<input @keyup.13="submit"/>
<input @keyup.enter="submit"/>

可通过全局config.keyCodes自定义别名

5.修饰键

鼠标键盘监听，组合监听

• ctrl
• alt
• shift
• meta

<!-- Alt + C组合 -->
<input @keyup.alt.67="clear"/>
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething"></div>

鼠标行为监听

• left
• right
• middle

当ViewModel被销毁时，所有事件处理器会自动删除