◆ currentTarget
◆ イベントを抜けると null になるので注意 
function addListener(selector){
;[...document.querySelectorAll(selector)].forEach(elem => {
elem.addEventListener("click", action, false)
})
}

function action(eve){
// リスナつけた要素は？
}

こんな感じで リスナを設定した要素がほしいことがありました

addEventListener の第二引数を action.bind(null, elem) にして action の引数を action(elem, eve){} の 2 つにすることもできますが いろいろな都合で eve だけを渡したいです

eve.target で実際にイベントが起きた要素が取れるのですし リスナつけた要素もあっていいと思い探したのですがそれらしいのはありませんでした


でも ググってみたら currentTarget でとれるみたい
調べてた時にみたら null だったんだけどなー

Chrome は非対応だったり？と期待せずに試してみると イベントの中でしか使えないようになってました

document.body.onclick = eve => {
window.eve = eve,
console.log(eve.currentTarget)
}

こんなリスナをつけて 適当なところをクリックします
<body>...</body>

ちゃんとリスナをつけた body が取得できています

このあとにコンソールで
console.log(window.eve.currentTarget)

を実行すると
null
イベントが終わると消えます


ところで target のほうは残ります
console.log(window.eve.target)
<div class="box">...</div>


この手の動きをするのは devtools でプロパティ確認と相性悪すぎなんですよね

devtools でオブジェクトを console.log などで表示したときはシンプルな
Object { a: 1, b: 2, ...}
みたいなものだけです

「▶」 を押して詳細を表示すると console.log したときのスナップショットではなく 開いたタイミングの参照先のデータを表示します

なのでリスナの中に console.log(eve) と書いておいて devtools で後から一覧を見ると絶対に null になっています
これがみつからない原因でした

Firefox と IE も調べてみましたが同じ挙動だったので Chrome の独自仕様じゃないみたい
なんで target は残るのに currentTarget は消えるの……