欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue?@tap事件之$event用法介紹

 更新時間:2022年03月28日 09:08:15   作者:fr_Lemon  
這篇文章主要介紹了vue?@tap事件之$event用法介紹,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

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對象

event 對象

(一)事件的 event 對象

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

event.preventDefault();

而在 IE 中,我們則需要寫:

event.returnValue = false;

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

event.preventDefault();

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

(二)vue 中的 event 對象

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

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

這里的實現(xiàn)方式看起來和 jquery 是一致的啊,但是實際上,vue 比 jquery 要要復雜得多,vue 官方也明確的說,v-on 不簡單是 addEventListener 的語法糖。在 jquery 中,我們傳入到 bind 方法中的回調(diào),只能是一個函數(shù)類型的變量或者一個匿名函數(shù),傳遞的時候,還不能執(zhí)行它(在后面加上一堆圓括號),否則就變成了取這一個函數(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 對象呢?怎么不見了?打印看看 arguments.length 也是 0,說明這時候確實沒有實參被傳入進來。T_T,那我們?nèi)绻刃枰獋鬟f參數(shù),又需要用到 event 對象,這個該怎么辦呢?

(三)$event

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

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

好吧,這樣看起來就正常了。

簡單總結來說:

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

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

烏龍

前面都算是鋪墊吧,現(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)心是崩潰的,丟進 chrome 里面一跑,尼瑪還真可以,打印 arguments.length,也是正常的 1。尼瑪!這是什么鬼?毀三觀???

既沒有傳入實參,也沒有接收的形參,這個 event 對象的來源,要么是上級作用鏈,要么。。。是全局作用域。。。全局的,不禁想到了 window.event

再次上 MDN 確認了一下,果然,window.event,ie 和 chrome 都在 window 對象上有這樣一個屬性:

代碼丟進 Firefox 中運行,event 果然就變成了 undefined 了。額,這個我也不知道說什么了。。。

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

相關文章

  • 在vue中嵌入外部網(wǎng)站的實現(xiàn)

    在vue中嵌入外部網(wǎng)站的實現(xiàn)

    這篇文章主要介紹了在vue中嵌入外部網(wǎng)站的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • vue.js獲取數(shù)據(jù)庫數(shù)據(jù)實例代碼

    vue.js獲取數(shù)據(jù)庫數(shù)據(jù)實例代碼

    本篇文章主要介紹了vue.js獲取數(shù)據(jù)庫數(shù)據(jù)實例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-05-05
  • 淺談Vue頁面級緩存解決方案feb-alive (下)

    淺談Vue頁面級緩存解決方案feb-alive (下)

    這篇文章主要介紹了淺談Vue頁面級緩存解決方案feb-alive(下),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-04-04
  • vue2的todolist入門小項目的詳細解析

    vue2的todolist入門小項目的詳細解析

    本篇文章主要介紹了vue2的todolist入門小項目的詳細解析,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-05-05
  • 實例詳解vue中的代理proxy

    實例詳解vue中的代理proxy

    這篇文章主要介紹了vue中的代理proxy,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-02-02
  • 關于VueSSR的一些理解和詳細配置

    關于VueSSR的一些理解和詳細配置

    這篇文章主要介紹了關于VueSSR的一些理解和詳細配置,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • elementUI下拉框實現(xiàn)隱藏時觸發(fā)相關事件方式

    elementUI下拉框實現(xiàn)隱藏時觸發(fā)相關事件方式

    這篇文章主要介紹了elementUI下拉框實現(xiàn)隱藏時觸發(fā)相關事件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Vue中的watch是什么以及watch和computed的區(qū)別

    Vue中的watch是什么以及watch和computed的區(qū)別

    這篇文章主要介紹了Vue中的watch是什么以及watch和computed的區(qū)別說明,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • vue路由傳參接收以及傳參對象為對象時的問題及解決

    vue路由傳參接收以及傳參對象為對象時的問題及解決

    這篇文章主要介紹了vue路由傳參接收以及傳參對象為對象時的問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • clipboard在vue中的使用的方法示例

    clipboard在vue中的使用的方法示例

    這篇文章主要介紹了clipboard在vue中的使用的方法示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-10-10

最新評論