MENU

JavaScriptDOM関数・メソッドaddeventlistener

【JavaScript】 targetとcurrentTargetの覚書

更新日:2020/07/27

 

 

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

 

このページの目次
  1. 覚書
  2. 検証

 

■関連記事:【JavaScript】 addEventListener()の第三引数useCaptureの謎

覚書

 

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】
【div2】
【div3】

 

上の要素をクリックしてください。

 

 

結果:

 

  • #div1をクリック

    target:【div1】 currentTarget:【div1

     

  • #div2をクリック

    target:【div2】 currentTarget:【div1

     

  • #div3をクリック

    target:【div3】 currentTarget:【div1

     

記事の内容について

 

こんにちはけーちゃんです。
説明するのって難しいですね。


「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。

そんなときは、ご意見もらえたら嬉しいです。

ご意見はこちら。
https://affi-sapo-sv.com/info.php