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

Question

currentTargetJavaScript イベントのとプロパティの正確な違いtargetと、どのシナリオでどのプロパティが使用されているかを教えてください。

Answer 1

イベントはデフォルトでバブルします。したがって、2つの違いは次のとおりです。

• targetイベントをトリガーした要素です (例: ユーザーがクリックした要素)
• currentTargetイベントリスナーがアタッチされる要素です。

Answer 2

最小限の実行可能な例

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: 1

Chromium 71 でテスト済み。

Answer 3

これが固執しない場合は、これを試してください：

current inは現在をcurrentTarget指します。他の場所から発生したイベントをキャッチした最新のターゲットです。