Vue事件獲取事件對象之event.currentTarget詳解
更新時間：2024年03月24日 08:42:16 作者：姜泥斷了姒
這篇文章主要介紹了Vue事件獲取事件對象之event.currentTarget,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue事件獲取事件對象event.currentTarget
在學(xué)習(xí)vue的時候，在進(jìn)行tab欄切換的時候，突然發(fā)現(xiàn)不能像jquery一樣$(this)獲取事件，然后才發(fā)現(xiàn)在vue里面獲取事件對象可以用event.currentTarget來獲取
獲取事件對象
- js的事件可以直接用this獲取事件對象，
- jQuery可以使用$(this)來獲取事件對象。
- vue借助事件的 event 對象 currentTarget 獲取事件對象
event.currentTarget
- HTML
<ul>
<li v-for="(item,item2) in catitmlst" v-bind:index="item2" v-on:click="eventObj">
<span id="eventobj">事件對象</span>
</li>
</ul>- JS
//獲取事件對象
eventObject(event){
let html = event.currentTarget
console.log(html)
//獲得點擊元素的前一個元素
event.currentTarget.previousElementSibling.innerHTML
//獲得點擊元素的第一個子元素
event.currentTarget.firstElementChild
//獲得點擊元素的下一個元素
event.currentTarget.nextElementSibling
//獲得點擊元素中id為eventobj的元素
event.currentTarget.getElementById("eventobj")
//獲得點擊元素的index(自定義的屬性)
event.currentTarget.getAttribute('index')
//獲得點擊元素的父級元素
event.currentTarget.parentElement
//獲得點擊元素的前一個元素的第一個子元素的HTML值
event.currentTarget.previousElementSibling.firstElementChild.innerHTML
}我目前還不是特別清楚，等我徹底搞明白了，我會在重新解釋一下vue獲取事件對象。
IE不兼容event.currentTarget
vue開發(fā)時實現(xiàn)點擊選中獲取DOM效果使用：
JSON.parse(event.currentTarget.nextElementSibling.innerText);
但I(xiàn)E不兼容，改換為：
JSON.parse(event.srcElement.parentNode.lastChild.innerText);
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue項目表單校驗的相關(guān)資料,前端表單校驗?zāi)軠p少無效請求,保護(hù)后端接口,使用ElementPlus表單組件進(jìn)行校驗,需要準(zhǔn)備表單對象、規(guī)則對象并進(jìn)行雙向綁定,用戶名、密碼以及協(xié)議勾選等字段都需符合特定規(guī)則,需要的朋友可以參考下2024-10-10
最近學(xué)習(xí)threejs有些時間了,就想著著手做些東西,下面這篇文章主要給大家介紹了關(guān)于vue3中如何用threejs畫一些簡單的幾何體的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
這篇文章主要介紹了Vue實現(xiàn)路由跳轉(zhuǎn)至外界頁面方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
Vue向后端傳數(shù)據(jù)后端接收為null問題及解決
這篇文章主要介紹了Vue向后端傳數(shù)據(jù)后端接收為null問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue中this.$router和this.$route的區(qū)別及push()方法
這篇文章主要給大家介紹了關(guān)于Vue中this.$router和this.$route的區(qū)別及push()方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
下面小編就為大家分享一篇vue.js或js實現(xiàn)中文A-Z排序的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue3純前端表格數(shù)據(jù)的導(dǎo)出與導(dǎo)入實現(xiàn)方式
這篇文章主要介紹了如何在純前端環(huán)境下使用xlsx-js-style庫進(jìn)行Excel表格文件的下載,并自定義樣式,還提到了使用xlsx庫進(jìn)行Excel表格數(shù)據(jù)的導(dǎo)入,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
這篇文章主要介紹了Vue實現(xiàn)微信支付功能遇到的坑,本文是小編記錄整理下拉的，以便日后所需，需要的朋友可以參考下2019-06-06
今天小編就為大家分享一篇淺談vue 錨點指令v-anchor的使用，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue實現(xiàn)獲取后端接口API代碼片段(已封裝Service方法名)
Vue實現(xiàn)獲取后端接口API代碼片段(已封裝Service方法名)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07