轉載請注明出處：http://www.cnblogs.com/meng1314-shuai/p/7455575.html
熟悉jquery的小伙伴應該都知道jquery獲取當前點擊對象是有多么的粗暴，直接$(dom)獲取當前點擊的dom元素，根據這個，幾乎可以獲取這個dom元素的所有屬性。不過，當我們使用vue的時候呢？
也許剛開始會有一點迷茫。唉？對啊，我用vue該怎么做到(屠龍寶刀)點擊就送...哦不，點擊就能獲取到我點擊的是哪一個元素對象呢？其實很簡單，vue.js，它不照樣是javascript么，我們也是可以通過點擊事件來傳遞$event事件的。
我們來看一下javascript文檔上有關event標准屬性的介紹：
| 屬性 | 描述 |
|---|---|
| bubbles | 返回布爾值，指示事件是否是起泡事件類型。 |
| cancelable | 返回布爾值，指示事件是否可擁可取消的默認動作。 |
| currentTarget | 返回其事件監聽器觸發該事件的元素。 |
| eventPhase | 返回事件傳播的當前階段。 |
| target | 返回觸發此事件的元素（事件的目標節點）。 |
| timeStamp | 返回事件生成的日期和時間。 |
| type | 返回當前 Event 對象表示的事件的名稱。 |
先來看看第三個屬性：
currentTarget：currentTarget 事件屬性返回其監聽器觸發事件的節點，即當前處理該事件的元素、文檔或窗口。
通俗一點說，就是你的點擊事件綁定在哪一個元素上，currentTarget獲取到的就是哪一個元素。
再來看看第五個屬性：
target：target 事件屬性可返回事件的目標節點（觸發該事件的節點），如生成事件的元素、文檔或窗口。
通俗一點說，就是你當前點擊的是哪一個元素，target獲取到的就是哪一個元素。
可能這樣說大家還是不太明白，下面我們就以vue來舉一個小例子：
模版代碼：
<li v-for="img in willLoadImg" @click="selectImg($event)"> <img class="loadimg" :src="img.url" :data-id="img.id" alt=""> </li>
我們給li標簽綁定了一個點擊事件selectImg()，傳入了$event對象。(這里循環遍歷了一個圖片數組，是為了展示更好的效果，如有需要請自行定義數組及其對應的圖片，可不要只是完全復制了代碼來問我為什么報錯神馬的)
事件方法代碼：
methods: {
selectImg(event) {
console.log(event.currentTarget);
console.log(event.target);
}
}
模版效果圖：
同樣的，為了演示效果，我們選擇了兩張豎直方向比較長的圖片並做了左右居中的處理。(灰色邊框之內都屬於li標簽)
接下來我們先點擊空白區域(即只點擊li標簽，不點擊img圖片)：
控制台輸出：
我們展開看一下：
我們發現，當前點擊事件下無論是currentTarget還是target獲取到的都是完整的li。好像沒有什么區別。
我們再來點擊中間的圖片區域：
控制台輸出：
我們發現，當前點擊事件下currentTarget獲取到的是完整的li，而target獲取到的只有完整img標簽。
相信小伙伴們已經看出了不同之處：
我們的事件綁定在li標簽上，無論我們只點擊li標簽還是點擊li標簽下的子級img圖片，currentTarget屬性獲取到的都是我們事件所綁定的那一個元素(即li標簽)，而target屬性獲取到的是我們點擊的那一個元素。
好啦，理解了這些之后，相信大家以后就能快速實現自己項目中獲取當前點擊對象的功能了，就不會再迷茫於我是用currentTarget還是target，也不會再疑惑於為什么我獲取到的點擊對象好像有些不太對不能滿足我的需要了。
也許還有人會問，獲取當前點擊對象其實沒什么用唉，實際項目中更需要的是獲取對象的屬性。。。。。。。。。。。。。。。。好吧，既然理解了vue其實還是javascript，獲取對象屬性很難么😅
getAttribute() 方法返回指定屬性名的屬性值。
提示：如果您希望以 Attr 對象返回屬性，請使用 getAttributeNode。
拿好不謝。。。
轉載請注明出處：http://www.cnblogs.com/meng1314-shuai/p/7455575.html