event.currentTargetは、イベントバブルにおける現在のイベントのDOM要素を返すプロパティ。
イベントバブルとは、子要素のイベントが発生すると、その親要素や先祖要素の同じタイプのイベントが発生すること。
構文
event.currentTarget
戻り値
イベントバブルにおける現在のイベントの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>
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>
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>
#sample1,
#sample2,
#sample3 {
margin-top: 7px;
padding: 10px;
background-color: #f0f0f0;
border: 1px solid gray;
border-radius: 10px;
cursor: pointer;
}
</style>