【JavaScript】 targetとcurrentTargetの覚書

addEventListenerで登録したイベントリスナーの引数は、targetとcurrentTargetというプロパティを持っています。
どちらもイベントに関連したDOM要素を指していますが、どのような要素を指しているのかすぐに忘れてしまうのでメモしておきます。

target … イベントが発生した要素

currentTarget … イベントを受け取った要素

<style>
div{ padding:20px; border:1px solid black;color:white;}
#div1{background:green;}
#div2{background:blue;}
#div3{background:purple;}
</style>

<div id="div1">【div1】
<div id="div2" >【div2】</div>
<div id="div3" >【div3】</div>
</div>

#div1のみに、クリックイベントを登録。

window.addEventListener( "DOMContentLoaded" , ()=> {
    document.getElementById("div1").addEventListener( "click" ,e=>{
        console.log( `target:【${ e.target.id }】 currentTarget:【${e.currentTarget.id}】` );
    });
});

結果：

• #div1をクリック

  target:【div1】 currentTarget:【div1】

• #div2をクリック

  target:【div2】 currentTarget:【div1】

• #div3をクリック

  target:【div3】 currentTarget:【div1】