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 と同様に処理される。
