それマグで!

知識はカップより、マグでゆっくり頂きます。 takuya_1stのブログ

習慣に早くから配慮した者は、 おそらく人生の実りも大きい。

dom event currentTargetとtargetの違い。

currentTargetについて

  • event.target はイベントが発生した要素
  • event.currentTarget はイベントリスナをセットした要素を指す。

ときどき、間違いそうになるのでメモ。

body #←リスナー
└── form
    ├── input
    └── label #クリックイベント

例の場合、body にリスナーを追加したので、label -> input -> ... -> body にイベントが来る。

{
target : input ,
 currentTarget: body
}

body にまとめて登録して受け取るテクニックも多用されるけど・・・addEventlistener しすぎると管理大変なんだよなぁ。開発ツールで追いかけるしかない。でもjQuery とかフレームワーク入ってくると追いかけるのめんどくさい。

サンプル

<html>
  <head>
    <script>
      var ev=null;
      var handler = function(ev){
        console.log(ev.target)
        console.log(ev.currentTarget)
      }
      window.addEventListener('DOMContentLoaded', function() {
        document.body.addEventListener('change',handler,true);
      });
    </script>
  </head>
  <body>
    <form id=form01 >
    <input type="CHECKBOX" value="true" id="ck01" name="ck01" />
    <label for="ck01">エッチなのはいけないと思います</label>
    </form>

  </body>

</html>

また、この違いを意識すぎて、Label要素ではまる。label はforを設定した時点でinput と同様に処理される。

参考資料

三章第五回 イベントオブジェクト — JavaScript初級者から中級者になろう — uhyohyo.net