Event.targetとEvent.currentTarget

（Web API ＞ Event）
https://developer.mozilla.org/ja/docs/Web/API/Event/target
https://developer.mozilla.org/ja/docs/Web/API/Event/currentTarget

イベントの情報を取得するには、Eventオブジェクトのプロパティを参照する。
その中でも、イベントが発生した要素に関連する情報は、以下の二つのプロパティによって取得することができる。

  • Event.target：イベントが発生した要素
  • Event.currentTarget：ハンドラが登録された要素

※親要素にハンドラが登録されている場合、イベントが発生した場所が子要素であっても、Event.currenTargetで親要素を取得する（キャプチャリングとバブリングの影響）。

<div class="parent">
  親要素
  <div>子要素</div>
</div>
const parentElm = document.querySelector('.parent');
parentElm.addEventListener('click', event => {
  event.target.setAttribute('style', 'background-color: blue;');
})

上記の例で子要素をクリックすると、子要素のbackground-colorだけがblueとなる。
（event.targetには**イベントを発生させた要素(= 子要素)**が入るため）

const parentElm = document.querySelector('.parent');
parentElm.addEventListener('click', event => {
  event.currentTarget.setAtrribute('style', 'background-color: blue;');
})

上記の例で子要素をクリックしても、常に親要素のbackground-colorがblueとなる。
（currentTargetには、イベントハンドラを**登録した要素(= 親要素)**が入るため）

inserted by FC2 system