currentTarget是Vue中一個(gè)非常重要的事件對象屬性,它用于獲取當(dāng)前觸發(fā)事件的目標(biāo)元素。
以下是一個(gè)代碼示例來演示currentTarget的用法:
HTML代碼:
<div id="app">
<button @click="handleClick">點(diǎn)擊我</button>
</div>
Vue代碼:
new Vue({
el: '#app',
methods: {
handleClick(event) {
console.log(event.currentTarget);
}
}
})
在上面的示例中,我們給按鈕添加了一個(gè)點(diǎn)擊事件,并且在事件處理函數(shù)中使用console.log()來打印event.currentTarget的值。在打開開發(fā)者工具的控制臺之后,可以看到在點(diǎn)擊按鈕時(shí),輸出的是一個(gè)DOM元素,它表示當(dāng)前觸發(fā)事件的元素,即按鈕。如果我們把事件處理函數(shù)綁定到按鈕的父元素上,那么輸出的就是這個(gè)父元素的DOM對象。
使用currentTarget可以避免在事件處理函數(shù)中多次使用document.getElementById()或其他選擇器方法來獲取當(dāng)前事件的目標(biāo)元素,從而提高代碼的執(zhí)行效率和代碼的可讀性。