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í)際項目中，我們可能需要獲取事件執(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)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)拖拽窗口功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章給大家介紹了vue2.0父子組件及非父子組件之間的通信方法，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-01-01
這篇文章主要介紹了vue中v-html妙用及空白行消除方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章介紹了Vue.js中v-for指令的用法，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
這篇文章主要為大家介紹了create?vite?實(shí)例源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要介紹了Vue如何提升首屏加載速度實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-06-06
Vue實(shí)用功能之實(shí)現(xiàn)拖拽元素、列表拖拽排序
在日常開發(fā)中,特別是管理端,經(jīng)常會遇到要實(shí)現(xiàn)拖拽排序的效果,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)用功能之實(shí)現(xiàn)拖拽元素、列表拖拽排序的相關(guān)資料,需要的朋友可以參考下2022-10-10
本文主要給大家介紹基于vue的分頁原生寫法，代碼分為html部分和js部分，簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-03-03
uni-app如何設(shè)置頁面全局背景色,其實(shí)非常簡單,一句話即可,但有時候也會踩一些坑,這篇文章主要給大家介紹了關(guān)于uniapp中設(shè)置全局頁面背景色的相關(guān)資料,需要的朋友可以參考下2023-03-03
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡單登錄界面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06