回答:
基本的に、イベントはデフォルトでバブルするため、2つの違いは次のとおりです。
target イベントをトリガーした要素（ユーザーがクリックしたなど）です currentTarget イベントリスナーが関連付けられている要素です。このブログ投稿の簡単な説明をご覧ください。
XMLHttpRequest
target =イベントをトリガーした要素。
currentTarget =イベントリスナーを持つ要素。
最小限の実行可能な例
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 click me
<div id="2">2 click me as well</div>
</div>
<div id="result">
<div>result:</div>
</div>クリックすると：
2 click me as well次にそれを1リッスンし、結果に追加します：
target: 2
currentTarget: 1その場合：
2 イベントを発生させた要素です1 イベントをリッスンした要素ですクリックすると：
1 click me代わりに、結果は次のとおりです。
target: 1
currentTarget: 1Chromium 71でテスト済み。
これが動かない場合は、これを試してください：
現在は現在をcurrentTarget指します。それは、他の場所からバブルアップしたイベントをキャッチした最新のターゲットです。
<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つのアラートが表示されます。そして今、次のコードを見てください、
<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は現在のイベントリスナーが接続されたノードを指します。詳細については、バブリングを参照してください
ここではPタグをクリックしましたが、Pにはリスナーがなく、その親要素divにあります。
event.targetは、イベントの発生元のノードです。イベントリスナーを配置する場所（段落またはスパン）に関係なく、event.targetはノード（ユーザーがクリックした場所）を参照します。
反対に、event.currentTargetは、現在のイベントリスナーがアタッチされたノードを参照します。すなわち。イベントリスナーを段落ノードにアタッチした場合、event.currentTargetは段落を参照し、event.targetはまだスパンを参照します。注：bodyにもイベントリスナーがある場合、このイベントリスナーの場合、event.currentTargetはbodyを参照します（つまり、event-listernersへの入力として提供されるイベントは、イベントが1つのノードをバブルするたびに更新されます）。