vue中$event使用之獲取當(dāng)前元素及相關(guān)元素
更新時間：2023年10月20日 11:28:10 作者：酷酷的橙007
這篇文章主要介紹了vue中$event使用之獲取當(dāng)前元素及相關(guān)元素,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
$event使用之獲取當(dāng)前元素及相關(guān)元素
對于常見的事件，比如點(diǎn)擊事件，第一個參數(shù)是事件本身，另外，在實(shí)際項(xiàng)目中，我們可能需要獲取事件執(zhí)行的元素或相關(guān)元素，在這里總結(jié)一下。
例如：點(diǎn)擊事件
<button @click = “clickfun($event)”>點(diǎn)擊</button>
通過事件獲取元素：
methods: {
clickfun(e) {
// e.target 是你當(dāng)前點(diǎn)擊的元素
// e.currentTarget 是你綁定事件的元素
# 獲得點(diǎn)擊元素的前一個元素
e.currentTarget.previousElementSibling.innerHTML
# 獲得點(diǎn)擊元素的第一個子元素
e.currentTarget.firstElementChild
# 獲得點(diǎn)擊元素的下一個元素
e.currentTarget.nextElementSibling
# 獲得點(diǎn)擊元素中id為string的元素
e.currentTarget.getElementById("string")
# 獲得點(diǎn)擊元素的string屬性
e.currentTarget.getAttributeNode('string')
# 獲得點(diǎn)擊元素的父級元素
e.currentTarget.parentElement
# 獲得點(diǎn)擊元素的前一個元素的第一個子元素的HTML值
e.currentTarget.previousElementSibling.firstElementChild.innerHTML
}
}
vue關(guān)于$event的通俗理解
通過對$event的多次打印結(jié)果，可見：
- $event是指當(dāng)前觸發(fā)的是什么事件（鼠標(biāo)事件，鍵盤事件等）
- $event.target則指的是事件觸發(fā)的目標(biāo)，即哪一個元素觸發(fā)了事件，這將直接獲取該dom元素
下面是例子：
<button @click="console.log($event)" name="哈哈">單擊</button>
由于鼠標(biāo)點(diǎn)擊，所以觸發(fā)鼠標(biāo)單擊事件，打印出來的是事件，如下圖：
展開后確實(shí)有target屬性，且target說明了這是button：
實(shí)際上展開target就可以看到更具體的信息，這里不做演示，其實(shí)也就是這個button的各種屬性等等，直接就是這dom元素。
且看下面這段代碼，直接打印出target：
<button @click="console.log($event.target)" name="哈哈">單擊</button>
可見打印出來的值就是這個元素本身
我們可嘗試獲取其屬性值：
<button @click="console.log($event.target.name)" name="哈哈">單擊</button>
所以我們可以利用$event進(jìn)行一些函數(shù)傳值之類的特殊操作
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
基于vue3+TypeScript實(shí)現(xiàn)一個簡易的Calendar組件
最近在學(xué)習(xí) react,在學(xué)習(xí)到使用 react 開發(fā) Calendar 組件的時候,突然聯(lián)想到使用 vue 進(jìn)行 Calendar 功能的實(shí)現(xiàn),因?yàn)槟壳笆褂玫募夹g(shù)棧是 vue,剛好可以加深下對 vue3 和 ts 的使用印象,所以本文給大家介紹了基于vue3+TypeScript實(shí)現(xiàn)一個簡易的Calendar組件2024-05-05
本篇文章主要介紹了vue引入swiper插件的使用實(shí)例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
vue點(diǎn)擊頁面空白處實(shí)現(xiàn)保存功能
這篇文章主要介紹了vue點(diǎn)擊頁面空白處實(shí)現(xiàn)保存功能,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-11-11
文章主要講述了在Vue中插入base64圖片的方法,包括在模板中寫入img標(biāo)簽、在methods中寫入事件以及調(diào)用后端接口,作者分享了個人經(jīng)驗(yàn),希望能為讀者提供參考2026-05-05
五種Vue實(shí)現(xiàn)加減乘除運(yùn)算的方法總結(jié)
這篇文章主要為大家詳細(xì)介紹了五種Vue實(shí)現(xiàn)加減乘除運(yùn)算的方法,文中的示例代碼簡潔易懂,對我們深入了解vue有一定的幫助,需要的可以了解下2023-08-08
這篇文章主要介紹了vue下使用nginx刷新頁面404的問題解決,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08
vue3+element?Plus實(shí)現(xiàn)表格前端分頁完整示例
這篇文章主要給大家介紹了關(guān)于vue3+element?Plus實(shí)現(xiàn)表格前端分頁的相關(guān)資料,雖然很多時候后端會把分頁,搜索,排序都做好,但是有些返回?cái)?shù)據(jù)并不多的頁面,或者其他原因不能后端分頁的通常會前端處理,需要的朋友可以參考下2023-08-08
axios 是一個基于promise用于瀏覽器和 nodejs 的 HTTP 客戶端，這篇文章主要介紹了Vue中axios的基本用法及axios的特征和使用注意細(xì)節(jié)，本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
這篇文章主要介紹了ant-design-vue按需加載的坑的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要介紹了詳解在vue-test-utils中mock全局對象，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11