快捷導(dǎo)航

vue.js click點(diǎn)擊事件獲取當(dāng)前元素對(duì)象的操作

更新時(shí)間：2020年08月07日 11:18:01 作者：吳小傻0

這篇文章主要介紹了vue.js click點(diǎn)擊事件獲取當(dāng)前元素對(duì)象的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

Vue.js可以傳遞$event對(duì)象

<body id="app">
 <ul>
 <li v-on:click="say('hello!', $event)">點(diǎn)擊當(dāng)前行文本</li>
 <li>li2</li>
 <li>li3</li>
 </ul>
 <script>
 new Vue({
  el: '#app',
  data: {
  message: 'Hello Vue.js!'
  },
  methods: {
  say: function(msg, event) {
   //獲取點(diǎn)擊對(duì)象  
   var el = event.currentTarget;
   alert("當(dāng)前對(duì)象的內(nèi)容："+el.innerHTML);
  }
 }
 })
 </script>
 </body>

屬性	描述
bubbles	返回布爾值，指示事件是否是起泡事件類(lèi)型。
cancelable	返回布爾值，指示事件是否可擁可取消的默認(rèn)動(dòng)作。
currentTarget	返回其事件監(jiān)聽(tīng)器觸發(fā)該事件的元素。
eventPhase	返回事件傳播的當(dāng)前階段。
target	返回觸發(fā)此事件的元素（事件的目標(biāo)節(jié)點(diǎn)）。
timeStamp	返回事件生成的日期和時(shí)間。
type	返回當(dāng)前 Event 對(duì)象表示的事件的名稱(chēng)。

currentTarget：currentTarget 事件屬性返回其監(jiān)聽(tīng)器觸發(fā)事件的節(jié)點(diǎn)，即當(dāng)前處理該事件的元素、文檔或窗口。

通俗一點(diǎn)說(shuō)，就是你的點(diǎn)擊事件綁定在哪一個(gè)元素上，currentTarget獲取到的就是哪一個(gè)元素。

target：target 事件屬性可返回事件的目標(biāo)節(jié)點(diǎn)（觸發(fā)該事件的節(jié)點(diǎn)），如生成事件的元素、文檔或窗口。

通俗一點(diǎn)說(shuō)，就是你當(dāng)前點(diǎn)擊的是哪一個(gè)元素，target獲取到的就是哪一個(gè)元素。

<li v-for="img in willLoadImg" @click="selectImg($event)">
 <img class="loadimg" :src="img.url" :data-id="img.id" alt="">
</li>

methods: {
 selectImg(event) {
   console.log(event.currentTarget);
   console.log(event.target);
 }
}

補(bǔ)充知識(shí)：vue獲取當(dāng)前點(diǎn)擊對(duì)象的下標(biāo)，和當(dāng)前點(diǎn)擊對(duì)象的內(nèi)容

<li v-for="(item,index) in tabList" v-on:click="addClass(index,$event)" >{{item.title}}</li>

data里面聲明：

data() {
 return {
  tabList: [
  { id: 0, title: "首頁(yè)1" },
  { id: 1, title: "首頁(yè)2" },
  { id: 2, title: "首頁(yè)3" }
  ],
  current:0
 };
 },

methods: {
 addClass: function(index,event) {
  this.current = index;
  //獲取點(diǎn)擊對(duì)象  
  var el = event.currentTarget;
  console.log("當(dāng)前對(duì)象的內(nèi)容："+el.innerHTML);
  console.log(this.current)
 }

以上這篇vue.js click點(diǎn)擊事件獲取當(dāng)前元素對(duì)象的操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: