vue.js click點擊事件獲取當前元素對象的操作

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

這篇文章主要介紹了vue.js click點擊事件獲取當前元素對象的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

Vue.js可以傳遞$event對象

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

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

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

通俗一點說，就是你的點擊事件綁定在哪一個元素上，currentTarget獲取到的就是哪一個元素。

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

通俗一點說，就是你當前點擊的是哪一個元素，target獲取到的就是哪一個元素。

<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);
 }
}

補充知識：vue獲取當前點擊對象的下標，和當前點擊對象的內容

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

data里面聲明：

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

methods: {
 addClass: function(index,event) {
  this.current = index;
  //獲取點擊對象  
  var el = event.currentTarget;
  console.log("當前對象的內容："+el.innerHTML);
  console.log(this.current)
 }

以上這篇vue.js click點擊事件獲取當前元素對象的操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: