背景

如果我們要阻止默認事件，在 chrome 等瀏覽器中，我們可能要寫一個：

event.preventDefault();

而在 IE 中，我們則需要寫：

event.returnValue = false;

jquery ，跨瀏覽器的實現，我們統一只需要寫：

event.preventDefault();

vue 中的 event 對象

相比于 jquery，vue 的事件綁定可以顯得更加直觀和便捷，我們只需要在模板上添加一個 v-on 指令（還可以簡寫為 @），即可完成類似于 $('xxx').bind 的效果，少了一個利用選擇器查詢元素的操作。我們知道，jquery 中，event 對象會被默認當做實參傳入到處理函數中，如下：

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

這里直接就獲取到了 event 對象，那么問題來了，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}} });

原來，vue.js通過將一個特殊變量 $event 傳入到回調中解決這個問題！！！

簡單總結其用法：

使用不帶圓括號的形式，event 對象將被自動當做實參傳入；

使用帶圓括號的形式，我們需要使用 $event 變量顯式傳入 event 對象。

烏龍

類似下面的代碼：

<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}} });

?

丟進 chrome 里面一跑，經測試是可以的，打印 arguments.length，也是正常的 1
既沒有傳入實參，也沒有接收的形參，這個 event 對象的來源window.event
window.event，ie 和 chrome 都在 window 對象上有這樣一個屬性：

window.event

代碼丟進 Firefox 中運行，event 果然就變成了 undefined 了。

?

?

?

?

總結

以上是生活随笔為你收集整理的vue-js 特殊变量$event常识的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。