《关于vue中event事件对象的使用》

(一)vue 中的 event 对象

我们先看看JQuery中的事件绑定的代码：

$('xxx').bind(...)

相比于 jquery，vue 的事件绑定可以显得更加直观和便捷，我们只需要在模板上添加一个 v-on 指令（简写为 @），即可完成类似于 $(‘xxx‘).bind 的效果，少了一个利用选择器查询元素的操作。JQuery 中，event 对象会被默认当做实参传入到处理函数中，如下：

$('body').bind('click', function (event) {
  console.log(typeof event);        // object 
});

这里直接就获取到了 event 对象，那么问题来了，vue 中呢？

<div id="app">
    <button @click="click">click me</button>
</div>
...
var app = new Vue({
    el: '#app',
    methods: {
        click(event) {
            console.log(typeof event);    // object
        }
    }
});

这里的实现方式看起来和 jquery 是一致的啊，但是实际上，vue 比 jquery 要要复杂得多，jquery 官方也明确的说，v-on 不简单是 addEventListener 的语法糖。在 jquery 中，我们传入到 bind 方法中的回调，只能是一个函数表类型的变量或者一个匿名函数，传递的时候，还不能执行它（在后面加上一堆圆括号），否则就变成了取这一个函数的返回值作为事件回调。vue 的 v-on 指令接受的值可以是函数执行的形式，比如 @click="click(233)" 。这里我们可以传递任何需要传递的参数，甚至可以不传递参数：

<div id="app">
    <button @click="click()">click me</button>
</div>
...
var app = new Vue({
    el: '#app',
    methods: {
        click(event) {
            console.log(typeof event);    // undefined
        }
    }
});

这里的 event 对象不见了(undefined)？打印看看 arguments.length 也是 0，说明这时候确实没有实参被传入进来。那我们如果既需要传递参数，又需要用到 event 对象，这个该怎么办呢？

（二）$event

翻看 vue 文档，不难发现，其实我们可以通过将一个特殊变量 $event 传入到回调中解决这个问题：

<div id="app">
    <button @click="click($event, 233)">click me</button>
</div>
...
var app = new Vue({
    el: '#app',
    methods: {
        click(event, val) {
            console.log(typeof event);    // object
        }
    }
});

这样看起来就正常了

总结：

1. 使用不带圆括号的形式(@click="click")，event 对象将被自动当做实参传入；
   
2. 使用带圆括号的形式(v-on:click="click()")，我们需要使用 $event 变量显式(@click="click($event, xxx)")传入 event 对象。