vue中$event使用之獲取當(dāng)前元素及相關(guān)元素
更新時(shí)間：2023年10月20日 11:28:10 作者：酷酷的橙007
這篇文章主要介紹了vue中$event使用之獲取當(dāng)前元素及相關(guān)元素,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
$event使用之獲取當(dāng)前元素及相關(guān)元素
對(duì)于常見(jiàn)的事件，比如點(diǎn)擊事件，第一個(gè)參數(shù)是事件本身，另外，在實(shí)際項(xiàng)目中，我們可能需要獲取事件執(zhí)行的元素或相關(guān)元素，在這里總結(jié)一下。
例如：點(diǎn)擊事件
<button @click = “clickfun($event)”>點(diǎn)擊</button>
通過(guò)事件獲取元素：
methods: {
clickfun(e) {
// e.target 是你當(dāng)前點(diǎn)擊的元素
// e.currentTarget 是你綁定事件的元素
# 獲得點(diǎn)擊元素的前一個(gè)元素
e.currentTarget.previousElementSibling.innerHTML
# 獲得點(diǎn)擊元素的第一個(gè)子元素
e.currentTarget.firstElementChild
# 獲得點(diǎn)擊元素的下一個(gè)元素
e.currentTarget.nextElementSibling
# 獲得點(diǎn)擊元素中id為string的元素
e.currentTarget.getElementById("string")
# 獲得點(diǎn)擊元素的string屬性
e.currentTarget.getAttributeNode('string')
# 獲得點(diǎn)擊元素的父級(jí)元素
e.currentTarget.parentElement
# 獲得點(diǎn)擊元素的前一個(gè)元素的第一個(gè)子元素的HTML值
e.currentTarget.previousElementSibling.firstElementChild.innerHTML
}
}
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)的是事件，如下圖：
展開(kāi)后確實(shí)有target屬性，且target說(shuō)明了這是button：
實(shí)際上展開(kāi)target就可以看到更具體的信息，這里不做演示，其實(shí)也就是這個(gè)button的各種屬性等等，直接就是這dom元素。
且看下面這段代碼，直接打印出target：
<button @click="console.log($event.target)" name="哈哈">單擊</button>
可見(jiàn)打印出來(lái)的值就是這個(gè)元素本身
我們可嘗試獲取其屬性值：
<button @click="console.log($event.target.name)" name="哈哈">單擊</button>
所以我們可以利用$event進(jìn)行一些函數(shù)傳值之類(lèi)的特殊操作
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)拖拽窗口功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章給大家介紹了vue2.0父子組件及非父子組件之間的通信方法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-01-01
這篇文章主要介紹了vue中v-html妙用及空白行消除方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章介紹了Vue.js中v-for指令的用法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
這篇文章主要為大家介紹了create?vite?實(shí)例源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要介紹了Vue如何提升首屏加載速度實(shí)例解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
Vue實(shí)用功能之實(shí)現(xiàn)拖拽元素、列表拖拽排序
在日常開(kāi)發(fā)中,特別是管理端,經(jīng)常會(huì)遇到要實(shí)現(xiàn)拖拽排序的效果,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)用功能之實(shí)現(xiàn)拖拽元素、列表拖拽排序的相關(guān)資料,需要的朋友可以參考下2022-10-10
本文主要給大家介紹基于vue的分頁(yè)原生寫(xiě)法，代碼分為html部分和js部分，簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-03-03
uniapp中設(shè)置全局頁(yè)面背景色的簡(jiǎn)單教程
uni-app如何設(shè)置頁(yè)面全局背景色,其實(shí)非常簡(jiǎn)單,一句話(huà)即可,但有時(shí)候也會(huì)踩一些坑,這篇文章主要給大家介紹了關(guān)于uniapp中設(shè)置全局頁(yè)面背景色的相關(guān)資料,需要的朋友可以參考下2023-03-03
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單登錄界面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06