Vue.js 事件绑定

1.事件监听

• v-on:eventName可以简写成@eventName
• 事件对象：在HTML中，事件参数为$event，但是即使不传递，在回调函数中也可以直接使用event读取

<div id="app">
    <button v-on:click="test">点我</button>
    <button v-on:click="test2('hello vue')">点我2</button>
    <button v-on:click="test3($event)">点我3</button>
    <button v-on:click="test4">点我4</button>

    <button @click="test">点我</button>
    <button @click="test2('hello vue')">点我2</button>
    <button @click="test3($event)">点我3</button>
    <button @click="test4">点我4</button>
</div>

methods: {
    test() {
        console.log('hi');
    },
    test2(content) {
        console.log(content);
    },
    test3(event) {
        console.log(event.target);
    },
    test4(){
       //即使不传$event,在回调函数中也可以使用event这个参数
       console.log(event.target.innerText);
    }
}

• 常见的事件类型

事件	说明
@click	点击事件
@keyup	键盘事件
@input	输入框输入事件
@change	输入框change事件
@transitionstart	过渡开始事件
@transitionend	过渡结束事件
@animationstart	动画开始事件
@animationend	动画结束事件

2.事件修饰符

• 事件修饰符用来控制事件的冒泡和默认行为，常用共有几个：

修饰符	作用
stop	阻止事件冒泡
prevent	阻止默认事件
self	事件源是自身时才触发，通俗的话，冒泡传递过来的事件不会触发
capture	使用捕获机制
once	只会执行一次
passive	-
native	原生事件修饰符，用于监听原生HTML的事件

<!-- 阻止事件冒泡 -->
<div id="big" @click="test">
    <div id="small" @click.stop="test2"></div>
</div>
<!-- 阻止默认事件，点击a链接不会发生跳转，只会执行test方法的代码 -->
<a href="https://www.baidu.com/" @click.prevent="test">百度一下</a>

• 修饰符可以串联

<a v-on:click.stop.prevent="doThat"></a>

3.按键修饰符

• 如果要监听某个具体的按键，可以使用按键码，例如：

<!-- 只有回车键按下的时候才会触发回调函数 -->

<!--使用按键码，回车键的keyCode是13 -->
<textarea @keyup.13="testKeyup"></textarea>

• 针对常见的按键，Vue预定义了按键修饰符

按键修饰符	对应按键
enter	回车
tab	tab
delete	“删除”和“退格”键
esc	esc
space	空格
up	方向-上
down	方向-下
left	方向-左
right	方向-右

<!--使用按键修饰符 回车键的按键修饰符为enter -->
<textarea @keyup.enter="testKeyup"></textarea>

• 其余按键可以用按键码，或者自定义按键修饰

//自定义按键修饰（q的keyCode是81）
Vue.config.keyCodes.q=81

<input type="text" value="hello" @keyup.q="test">
<input type="text" value="hello" @keyup.81="test">

4.鼠标按钮修饰符(2.2.0 新增)

• 监听鼠标右键的点击事件

<button @click.right.prevent="throttle_click">点我</button>

• 监听鼠标中键的点击事件

<button @click.middle.prevent="throttle_click">点我</button>

5.系统修饰键

• 可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器

修饰键	对应按键
ctrl	ctrl
alt	alt
shift	shift

• 示例（不常用，不做测试，直接贴官方的示例）

<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">

<!-- 按下Ctrl键 + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>

• exact 修饰符 （2.5.0 新增）：用来精确的系统修饰符组合触发的事件（不常用，不做测试，直接贴官方的示例）

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>