【 JS筆記 】 e.target 與 e.currentTarget 的差別


Posted by Jim on 2022-07-13

有時候在使用 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.currentTargetthis 是一樣的東西喔!

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:指的是被監聽的物件。


#FontEnd #event







Related Posts

循環神經網路 RNN

循環神經網路 RNN

JavaScript 核心 - 你其實已經用過閉包(closure)

JavaScript 核心 - 你其實已經用過閉包(closure)

[ week10 ] 綜合能力測驗-攻略與解題心得

[ week10 ] 綜合能力測驗-攻略與解題心得


Comments