vue中關(guān)于$event的通俗理解

通過(guò)對(duì)$event的多次打印結(jié)果,可見(jiàn):

$event是指當(dāng)前觸發(fā)的是什么事件(鼠標(biāo)事件,鍵盤(pán)事件等)

$event.target則指的是事件觸發(fā)的目標(biāo),即哪一個(gè)元素觸發(fā)了事件,這將直接獲取該dom元素

下面是例子:


<button @click="console.log($event)" name="哈哈">單擊</button>

由于鼠標(biāo)點(diǎn)擊,所以觸發(fā)鼠標(biāo)單擊事件,打印出來(lái)的是事件,如下圖:

image

展開(kāi)后確實(shí)有target屬性,且target說(shuō)明了這是button:

image

實(shí)際上展開(kāi)target就可以看到更具體的信息,這里不做演示,其實(shí)也就是這個(gè)button的各種屬性等等,直接就是這dom元素。

且看下面這段代碼,直接打印出target:

<button @click="console.log($event.target)" name="哈哈">單擊</button>
image

可見(jiàn)打印出來(lái)的值就是這個(gè)元素本身
我們可嘗試獲取其屬性值:

<button @click="console.log($event.target.name)" name="哈哈">單擊</button>
image

所以我們可以利用$event進(jìn)行一些函數(shù)傳值之類的特殊操作。目前筆者只發(fā)現(xiàn)了這些作用,多有遺漏,歡迎補(bǔ)充。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • ??JavaScript 與 HTML 之間的交互是通過(guò)事件實(shí)現(xiàn)的。 ??事件,就是文檔或?yàn)g覽器窗口中發(fā)生的一些特...
    霜天曉閱讀 3,684評(píng)論 1 11
  • 第3章 基本概念 3.1 語(yǔ)法 3.2 關(guān)鍵字和保留字 3.3 變量 3.4 數(shù)據(jù)類型 5種簡(jiǎn)單數(shù)據(jù)類型:Unde...
    RickCole閱讀 5,502評(píng)論 0 21
  • JavaScript 與 HTML 之間的交互是通過(guò)事件實(shí)現(xiàn)的。事件,就是文檔或?yàn)g覽器窗口中發(fā)生的一些特定的交互瞬...
    LemonnYan閱讀 737評(píng)論 0 4
  • 本節(jié)介紹各種常見(jiàn)的瀏覽器事件。 鼠標(biāo)事件 鼠標(biāo)事件指與鼠標(biāo)相關(guān)的事件,主要有以下一些。 click 事件,dblc...
    許先生__閱讀 2,839評(píng)論 0 4
  • 1### Menu 第13章 事 件 13.2 事件處理程序 13.2.1 HTML事件處理程序 13.2.2 D...
    ft207741閱讀 473評(píng)論 0 0

友情鏈接更多精彩內(nèi)容