javascriptのcurrentTargetプロパティとtargetプロパティの正確な違いは何ですか？

Question

currentTargetとtargetのプロパティとJavascriptイベントの正確な違いを教えてもらえますか？どのシナリオでどのプロパティが使用されますか？

Answer 1

基本的には、デフォルトでevents bubble両者の差があるので：

• targetイベントをトリガした要素（例えば、ユーザーがクリックした）
• currentTargetは、イベントリスナーという要素ですに添付されています。

このblog postの簡単な説明を参照してください。

Answer 2

target =イベントをトリガーした要素。

currentTarget =イベントを待ち受ける要素。

Answer 3

これが付着していない場合は、これを試してみてください。

currentTargetで

現在は存在を指します。それは他の場所から沸騰したイベントを捕らえた最新のターゲットです。

Answer 4

最小例

window.onload = function() { 
 
    var resultElem = document.getElementById('result') 
 
    document.getElementById('1').addEventListener(
 
    'click', 
 
    function(event) { 
 
     resultElem.innerHTML += ('<div>target: ' + event.target.id + '</div>') 
 
     resultElem.innerHTML += ('<div>currentTarget: ' + event.currentTarget.id + '</div>') 
 
    }, 
 
    false 
 
) 
 
    document.getElementById('2').dispatchEvent(
 
      new Event('click', { bubbles:true })) 
 
}

<div id="1">1 
 
    <div id="2">2 
 
    </div> 
 
</div> 
 
<div id="result"> 
 
    <div>result:</div> 
 
</div>

2を1をクリックし、に列挙されている場合、結果は：

target: 2 
currentTarget: 1 

なぜならその場合：

• は、イベント
• 1を発信要素であるイベントが発信されたノード、すなわち、あるイベント

Answer 5

event.targetを聞い要素です。あなたのイベントリスナーを（段落またはスパン上に）配置するたびに、event.targetはノード（ユーザーがクリックした場所）を参照します。

event.currentTargetは、現在のイベントリスナーが接続されたノードを指します。つまり段落ノードにイベントリスナーを追加した場合、event.currentTargetは段落を参照し、event.targetは引き続きspanを参照します。 注：bodyにイベントリスナーがある場合、このイベントリスナーの場合、event.currentTargetはボディを参照します（つまり、event-listernersへの入力として提供されるイベントは、イベントが1つのノードをバブリングするたびに更新されます）。

Answer 6

<style> 
 
    body * { 
 
    margin: 10px; 
 
    border: 1px solid blue; 
 
    } 
 
</style> 
 

 
<form onclick="alert('form')">FORM 
 
    <div onclick="alert('div')">DIV 
 
    <p onclick="alert('p')">P</p> 
 
    </div> 
 
</form>

上記のコードではPタグをクリックすると、その後、次の3回の警告を取得する場合、あなたはdivタグをクリックすると、フォームをクリックすると上の2つの警告と1つのアラートを取得しますタグ。

[：私達はちょうどPとフォームタグからonclickの取り外し、我々はPタグに我々をクリックすると、今、我々は唯一の1つのアラートを取得

<style> 
 
    body * { 
 
    margin: 10px; 
 
    border: 1px solid blue; 
 
    } 
 
</style> 
 
<script> 
 
function fun(event){ 
 
    alert(event.target+" "+event.currentTarget); 
 
} 
 

 
</script> 
 

 
<form>FORM 
 
    <div onclick="fun(event)">DIV 
 
    <p>P</p> 
 
    </div> 
 
</form>

そして今、次のコードを参照してください、オブジェクトHTMLParagraphElement] [オブジェクトHTMLDivElement]

ここで、event.targetは[object HTMLParagraphElement]、event.curentTargetは[object HTMLDivElement]：です。だから

event.targetイベントが発信されたノード、及び event.currentTargetは、反対に、現在のイベントリスナーがsee bubbling

詳細を知るattached.Toされたノードを指します

ここでPタグをクリックしましたが、Pの親要素divにリスナーはありません。