.currentTarget
イベントがDOMを巡るものとして、現在のイベントのターゲットを調べます。 イベントが発生している要素を示すevent.targetとは異なり、 イベントハンドラが割り当てられている要素を常に参照します。
例
event.currentTargetは、幾つかの要素へ同じイベントハンドラを割り当てている際に有用です。
<html>
<head>
<title>currentTargetサンプル</title>
</head>
<body>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<script>
function hide(e){
e.currentTarget.style.visibility = "hidden";
// この関数はイベントハンドラとして使用されます。
// this === e.currentTarget
}
var ps = document.getElementsByTagName('p');
for(var i = 0; i < ps.length; i++){
ps[i].addEventListener('click', hide, false);
}
// P要素をクリックすると、そのクリックされた要素だけが非表示になります。
</script>
</body>
</html>
ブラウザ互換性
Internet Explorer6～8では、このイベントモデルが異なり、
イベントリスナーには非標準のattachEventメソッドが割り当てられます。
このモデルでは、event.currentTargetに相当するもは存在せず、
thisはグローバルオブジェクトになります。
event.currentTarget機能をエミュレートする1つの解決策としては、
要素を第1引数としたFunction.prototype.callを使用して、
ハンドラ呼び出しの関数を、独自の関数でラップすることです。
この方法であれば、thisは期待した通りの値になります。
仕様
DOM Level 2 Events: Event.currentTarget
関連項目
© 2017 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
このページは、ページトップのURL先のMozilla Developer Network(以下、MDN)のコンテンツを翻訳した内容を基に構成されています。 構成について異なる点も含まれますので、下記の項目を確認し、必要に応じて元のコンテンツをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。
- 特定のブラウザに特化しすぎている情報やあまりにも古い情報、 または試験的に導入されているようなAPIや機能については、省略していることがあります。
- 例やデモについて、実際にページ内で動作させる関係で一部ソースコードを変更している場合や、 その例で使用しているコンテンツの単語や文章などを日本人向けに変更しいてる場合があります。
- MDNの更新頻度が高いため、元のコンテンツと比べ情報が古くなっている可能性があります。
- "訳注:"などの断わりを入れた上で、日本人向けの情報の追記を行っている事があります。