欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue事件獲取事件對(duì)象之event.currentTarget詳解

 更新時(shí)間：2024年03月24日 08:42:16   作者：姜泥斷了姒  
這篇文章主要介紹了Vue事件獲取事件對(duì)象之event.currentTarget,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue事件獲取事件對(duì)象event.currentTarget

在學(xué)習(xí)vue的時(shí)候，在進(jìn)行tab欄切換的時(shí)候，突然發(fā)現(xiàn)不能像jquery一樣$(this)獲取事件，然后才發(fā)現(xiàn)在vue里面獲取事件對(duì)象可以用event.currentTarget來(lái)獲取

獲取事件對(duì)象

  • js的事件可以直接用this獲取事件對(duì)象，
  • jQuery可以使用$(this)來(lái)獲取事件對(duì)象。
  • vue借助事件的 event 對(duì)象 currentTarget 獲取事件對(duì)象

event.currentTarget

  • HTML
 <ul>
     <li v-for="(item,item2) in catitmlst" v-bind:index="item2" v-on:click="eventObj">
         <span id="eventobj">事件對(duì)象</span>
     </li>
</ul>
  • JS
//獲取事件對(duì)象
    eventObject(event){
        let html = event.currentTarget
        console.log(html)
        //獲得點(diǎn)擊元素的前一個(gè)元素
        event.currentTarget.previousElementSibling.innerHTML
        //獲得點(diǎn)擊元素的第一個(gè)子元素
        event.currentTarget.firstElementChild
        //獲得點(diǎn)擊元素的下一個(gè)元素
        event.currentTarget.nextElementSibling
        //獲得點(diǎn)擊元素中id為eventobj的元素
        event.currentTarget.getElementById("eventobj")
        //獲得點(diǎn)擊元素的index(自定義的屬性)
        event.currentTarget.getAttribute('index')
        //獲得點(diǎn)擊元素的父級(jí)元素
        event.currentTarget.parentElement
        //獲得點(diǎn)擊元素的前一個(gè)元素的第一個(gè)子元素的HTML值
        event.currentTarget.previousElementSibling.firstElementChild.innerHTML
    }

我目前還不是特別清楚，等我徹底搞明白了，我會(huì)在重新解釋一下vue獲取事件對(duì)象。

IE不兼容event.currentTarget

vue開發(fā)時(shí)實(shí)現(xiàn)點(diǎn)擊選中獲取DOM效果使用：

JSON.parse(event.currentTarget.nextElementSibling.innerText);

但I(xiàn)E不兼容，改換為：

JSON.parse(event.srcElement.parentNode.lastChild.innerText);

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論