vue $event用法

html  

<span class="cha mui-badge mui-badge-success fr font14" @tap="Isinspect('普通參數(shù)',$event)">查崗</span>

js端：

function Isinspect(a,event) {
? ? ? console.log(JSON.stringify( event.detail )); ? //可打印出所有的event屬性
? ? ? var str = event.currentTarget; ? ? ? ? ? ? ? ? ? ? ?//返回綁定事件的元素
? ? ? console.log(str.innerHTML); ? ? ? ? ? ? ? ? ? ? ? //可打印出綁定事件的元素的值
}

vue奇怪的event對(duì)象

event 對(duì)象

（一）事件的 event 對(duì)象

你說(shuō)你是搞前端的，那么你肯定就知道事件，知道事件，你就肯定知道 event 對(duì)象吧？各種的庫(kù)、框架多少都有針對(duì) event 對(duì)象的處理。比如 jquery，通過(guò)它內(nèi)部進(jìn)行一定的封裝，我們開發(fā)的時(shí)候，就無(wú)需關(guān)注 event 對(duì)象的部分兼容性問(wèn)題。最典型的，如果我們要阻止默認(rèn)事件，在 chrome 等瀏覽器中，我們可能要寫一個(gè)：

event.preventDefault();

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

event.returnValue = false;

多虧了 jquery ，跨瀏覽器的實(shí)現(xiàn)，我們統(tǒng)一只需要寫：

event.preventDefault();

兼容？jquery 內(nèi)部幫我們搞定了。類似的還有比如阻止事件冒泡以以及事件綁定（addEventListener / attachEvent）等，簡(jiǎn)單到很多的后端都會(huì)使用 $('xxx').bind(...)，這不是我們今天的重點(diǎn)，我們往下看。

（二）vue 中的 event 對(duì)象

我們知道，相比于 jquery，vue 的事件綁定可以顯得更加直觀和便捷，我們只需要在模板上添加一個(gè) v-on 指令（還可以簡(jiǎn)寫為 @），即可完成類似于 $('xxx').bind 的效果，少了一個(gè)利用選擇器查詢?cè)氐牟僮鳌Ｎ覀冎?，jquery 中，event 對(duì)象會(huì)被默認(rèn)當(dāng)做實(shí)參傳入到處理函數(shù)中，如下：

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

這里直接就獲取到了 event 對(duì)象，那么問(wèn)題來(lái)了，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)方式看起來(lái)和 jquery 是一致的啊，但是實(shí)際上，vue 比 jquery 要要復(fù)雜得多，vue 官方也明確的說(shuō)，v-on 不簡(jiǎn)單是 addEventListener 的語(yǔ)法糖。在 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，說(shuō)明這時(shí)候確實(shí)沒(méi)有實(shí)參被傳入進(jìn)來(lái)。T_T，那我們?nèi)绻刃枰獋鬟f參數(shù)，又需要用到 event 對(duì)象，這個(gè)該怎么辦呢？

（三）$event

翻看 vue 文檔，不難發(fā)現(xiàn)，其實(shí)我們可以通過(guò)將一個(gè)特殊變量 $event 傳入到回調(diào)中解決這個(gè)問(wèn)題：

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

好吧，這樣看起來(lái)就正常了。

簡(jiǎn)單總結(jié)來(lái)說(shuō)：

使用不帶圓括號(hào)的形式，event 對(duì)象將被自動(dòng)當(dāng)做實(shí)參傳入；

使用帶圓括號(hào)的形式，我們需要使用 $event 變量顯式傳入 event 對(duì)象。

烏龍

前面都算是鋪墊吧，現(xiàn)在真正的烏龍來(lái)了。

翻看小伙伴兒的代碼，偶然看到了類似下面的代碼：

<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。尼瑪！這是什么鬼？毀三觀??？

既沒(méi)有傳入實(shí)參，也沒(méi)有接收的形參，這個(gè) event 對(duì)象的來(lái)源，要么是上級(jí)作用鏈，要么。。。是全局作用域。。。全局的，不禁想到了 window.event

再次上 MDN 確認(rèn)了一下，果然，window.event，ie 和 chrome 都在 window 對(duì)象上有這樣一個(gè)屬性：

代碼丟進(jìn) Firefox 中運(yùn)行，event 果然就變成了 undefined 了。額，這個(gè)我也不知道說(shuō)什么了。。。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論