event.targetプロパティ

投稿日: 2013年9月30日 作成者: alphasis

event.targetは、イベントバブルのイベントを開始したDOM要素を返すプロパティ。

イベントバブルとは、子要素のイベントが発生すると、その親要素や先祖要素の同じタイプのイベントが発生すること。

構文

event.target

戻り値

イベントバブルのイベントを開始したDOM要素。

サンプル

sample1：
sample2：
sample3：

event.target:

event.currentTarget:

サンプルの動作について

  • 「sample1」のDIV要素をクリックすると、「event.target: 」の右横に「sample1」、「event.currentTarget: 」の右横にも「sample1」と表示する。
  • 「sample2」のDIV要素をクリックすると、「event.target: 」の右横に「sample2」、「event.currentTarget: 」の右横には「sample1」と表示する。
  • 「sample3」のDIV要素をクリックすると、「event.target: 」の右横に「sample3」、「event.currentTarget: 」の右横には「sample1」と表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
window.onload = function () {
 document.getElementById( "sample1" ).onclick = function( $event1 ){
  document.getElementById( "sampleOutputTarget" ).innerHTML = $event1.target.id;
  document.getElementById( "sampleOutputCurrentTarget" ).innerHTML = $event1.currentTarget.id;
 };
 document.getElementById( "sample2" ).onclick = function( $event2 ){
  document.getElementById( "sampleOutputTarget" ).innerHTML = $event2.target.id;
  document.getElementById( "sampleOutputCurrentTarget" ).innerHTML = $event2.currentTarget.id;
 };
 document.getElementById( "sample3" ).onclick = function( $event3 ){
  document.getElementById( "sampleOutputTarget" ).innerHTML = $event3.target.id;
  document.getElementById( "sampleOutputCurrentTarget" ).innerHTML = $event3.currentTarget.id;
 };
}
</script>

HTML

<div id="sample1">
 sample1：<span id="sample1output"></span>
 <div id="sample2">
  sample2：<span id="sample2output"></span>
  <div id="sample3">
   sample3：<span id="sample3output"></span>
  </div>
 </div>
</div>
<p>event.target: <span id="sampleOutputTarget"></span></p>
<p>event.currentTarget: <span id="sampleOutputCurrentTarget"></span></p>

CSS

<style>
#sample1,
#sample2,
#sample3 {
 margin-top: 7px;
 padding: 10px;
 background-color: #f0f0f0;
 border: 1px solid gray;
 border-radius: 10px;
 cursor: pointer;
}
</style>

スポンサード リンク

カテゴリー: DOM, Eventオブジェクト, JavaScript, イベント, プロパティ, リファレンス パーマリンク