javascript targetとcurrentTargetの違い

javascript targetとcurrentTargetの違い

javascriptで、targetとcurrentTargetの違いを確認するサンプルコードを掲載してます。ブラウザはchromeを使用しています。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 91.0.4472.77

targetとcurrentTargetの違い

targetとcurrentTargetの違いは、 currentTargetは子要素でイベントが発生すれば、親要素まで親のイベントの取得して、targetは実際に発生した要素のイベントを取得します。

サンプルコード

以下は、
実際に親要素~孫要素までのクリックイベントで、それぞれイベントが発生した際の要素の「id」を表示するサンプルコードとなります。

※cssには「tailwind」を使用してます。

実行結果を確認すると、currentTargetは最終的に親要素の「id」を表示して、targetは実際に発生した要素の「id」を表示していることが確認できます。

アロー関数とdocument.getElementByIdを省略して、簡潔に記述することもできます。

また、親要素にイベントがないと、結果は同じになります。

実行結果