有時候在使用 addEventListener
時會搞混這兩個的用法,整理一下各個功能及使用時間!
Event.target
MDN:The read-only target property of the Event interface is a reference to the object onto which the event was dispatched.
簡單講就是當事件觸發時,使用者觸發的 Element
是誰,e.target
就是那個 Element
。
Event.currentTarget
MDN:The currentTarget read-only property of the Event interface identifies the current target for the event, as the event traverses the DOM. It always refers to the element to which the event handler has been attached.
簡單講就是當事件觸發時,addEventListener
監聽的是誰,則 e.currentTarget
就是誰。
補充:
如果是使用 declaration
(函式宣告式)的話,e.currentTarget
與 this
是一樣的東西喔!
const items = document.querySelector('.items');
items.addEventListener('click', function(e){
console.log(this == e.currentTarget);
//output: true
})
舉例
看完定義還是有點模糊,讓我們實際操作一次:
可以看到當點擊最裡面的 link
時,e.target
會是指 link
本身,而 e.currentTarget
指的是監聽的對象 items
,點擊 button
也會是一樣的原理。
會發現不管怎麼點, e.currentTarget
永遠都是指向監聽的對象 items
,而 e.target
會隨著使用者觸發的項目去改變。
總結
e.target
:指的是觸發事件的物件。
e.currentTarget
:指的是被監聽的物件。