好久都沒有寫點(diǎn)東西了， 前段時(shí)間工作搞得頭大脚作，真的就是一起加班到死了。廢話不多說缔刹，寫這篇文章是因?yàn)檫@次因?yàn)?event 對(duì)象鬧了一個(gè)烏龍鳖枕，以此總結(jié)一下魄梯。
一、event 對(duì)象
（一）事件的 event 對(duì)象
你說你是搞前端的宾符，那么你肯定就知道事件酿秸，知道事件，你就肯定知道 event 對(duì)象吧魏烫？各種的庫辣苏、框架多少都有針對(duì) event 對(duì)象的處理。比如 jquery哄褒，通過它內(nèi)部進(jìn)行一定的封裝稀蟋，我們開發(fā)的時(shí)候，就無需關(guān)注 event 對(duì)象的部分兼容性問題呐赡。最典型的退客，如果我們要阻止默認(rèn)事件，在 chrome 等瀏覽器中链嘀，我們可能要寫一個(gè)：
event.preventDefault();
而在 IE 中萌狂，我們則需要寫：
event.returnValue = false;
多虧了 jquery ，跨瀏覽器的實(shí)現(xiàn)怀泊，我們統(tǒng)一只需要寫：
event.preventDefault();
兼容茫藏？jquery 內(nèi)部幫我們搞定了。類似的還有比如阻止事件冒泡以以及事件綁定（addEventListener / attachEvent）等霹琼，簡單到很多的后端都會(huì)使用 $('xxx').bind(...)务傲，這不是我們今天的重點(diǎn)，我們往下看枣申。
（二）vue 中的 event 對(duì)象
我們知道售葡，相比于 jquery，vue 的事件綁定可以顯得更加直觀和便捷忠藤，我們只需要在模板上添加一個(gè) v-on 指令（還可以簡寫為 @）挟伙，即可完成類似于 $('xxx').bind 的效果，少了一個(gè)利用選擇器查詢?cè)氐牟僮飨ㄍ铡Ｎ覀冎老窈琷query 中烘豹，event 對(duì)象會(huì)被默認(rèn)當(dāng)做實(shí)參傳入到處理函數(shù)中瓜贾，如下：
$('body').bind('click', function (event) {
console.log(typeof event); // object
});
這里直接就獲取到了 event 對(duì)象，那么問題來了携悯，vue 中呢祭芦？
<div id="app">
<button v-on:click="click">click me</button>
</div>
...
var app = new Vue({
el: '#app',
methods: {
click(event) {
console.log(typeof event); // object
}
}
});
這里的實(shí)現(xiàn)方式看起來和 jquery 是一致的啊，但是實(shí)際上憔鬼，vue 比 jquery 要要復(fù)雜得多龟劲，vue 官方也明確的說胃夏，v-on 不簡單是 addEventListener 的語法糖。在 jquery 中昌跌，我們傳入到 bind 方法中的回調(diào)仰禀，只能是一個(gè)函數(shù)類型的變量或者一個(gè)匿名函數(shù)，傳遞的時(shí)候蚕愤，還不能執(zhí)行它（在后面加上一堆圓括號(hào)）答恶，否則就變成了取這一個(gè)函數(shù)的返回值作為事件回調(diào)。而我們知道萍诱，vue 的 v-on 指令接受的值可以是函數(shù)執(zhí)行的形式悬嗓，比如 v-on:click="click(233)" 。這里我們可以傳遞任何需要傳遞的參數(shù)裕坊，甚至可以不傳遞參數(shù)：
<div id="app">
<button v-on:click="click()">click me</button>
</div>
...
var app = new Vue({
el: '#app',
methods: {
click(event) {
console.log(typeof event); // undefined
}
}
});
咦包竹？我的 event 對(duì)象呢？怎么不見了籍凝？打印看看 arguments.length 也是 0周瞎，說明這時(shí)候確實(shí)沒有實(shí)參被傳入進(jìn)來。T_T静浴，那我們?nèi)绻刃枰獋鬟f參數(shù)堰氓，又需要用到 event 對(duì)象，這個(gè)該怎么辦呢苹享？
（三）$event
翻看 vue 文檔双絮，不難發(fā)現(xiàn)，其實(shí)我們可以通過將一個(gè)特殊變量 $event 傳入到回調(diào)中解決這個(gè)問題：
<div id="app">
<button v-on:click="click($event, 233)">click me</button>
</div>
...
var app = new Vue({
el: '#app',
methods: {
click(event, val) {
console.log(typeof event); // object
}
}
});
好吧得问，這樣看起來就正常了囤攀。
簡單總結(jié)來說：
- 使用不帶圓括號(hào)的形式，event 對(duì)象將被自動(dòng)當(dāng)做實(shí)參傳入宫纬；
- 使用帶圓括號(hào)的形式焚挠，我們需要使用 $event 變量顯式傳入 event 對(duì)象。
二漓骚、烏龍
前面都算是鋪墊吧蝌衔，現(xiàn)在真正的烏龍來了。
翻看小伙伴兒的代碼蝌蹂，偶然看到了類似下面的代碼：
<div id="app">
<button v-on:click="click(233)">click me</button>
</div>
...
var app = new Vue({
el: '#app',
methods: {
click(val) {
console.log(typeof event); // object
}
}
});
看到這一段代碼噩斟，我的內(nèi)心是崩潰的，丟進(jìn) chrome 里面一跑孤个，尼瑪還真可以剃允，打印 arguments.length，也是正常的 1。尼瑪斥废！這是什么鬼椒楣？毀三觀啊牡肉？
既沒有傳入實(shí)參捧灰，也沒有接收的形參，這個(gè) event 對(duì)象的來源统锤，要么是上級(jí)作用鏈凤壁，要么。跪另。拧抖。是全局作用域。免绿。唧席。全局的，不禁想到了 window.event
嘲驾。再次上 MDN 確認(rèn)了一下淌哟，果然，window.event辽故，ie 和 chrome 都在 window 對(duì)象上有這樣一個(gè)屬性：
代碼丟進(jìn) Firefox 中運(yùn)行徒仓，event 果然就變成了 undefined 了。額誊垢，這個(gè)我也不知道說什么了掉弛。。喂走。
