vue.js click點選事件獲取當前元素物件的操作
阿新 • • 發佈：2020-08-08
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 | 返回其事件監聽器觸發該事件的元素。 |
| eventPhase | 返回事件傳播的當前階段。 |
| target | 返回觸發此事件的元素（事件的目標節點）。 |
| timeStamp | 返回事件生成的日期和時間。 |
| type | 返回當前 Event 物件表示的事件的名稱。 |
currentTarget：currentTarget 事件屬性返回其監聽器觸發事件的節點，即當前處理該事件的元素、文件或視窗。
通俗一點說，就是你的點選事件繫結在哪一個元素上，currentTarget獲取到的就是哪一個元素。
target：target 事件屬性可返回事件的目標節點（觸發該事件的節點），如生成事件的元素、文件或視窗。
通俗一點說，就是你當前點選的是哪一個元素，target獲取到的就是哪一個元素。
<li v-for="img in willLoadImg" @click="selectImg($event)">
<img class="loadimg" :src="img.url" :data-id="img.id" alt="vue.js click點選事件獲取當前元素物件的操作">
</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點選事件獲取當前元素物件的操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。