mokajima.com

event.target と event.currentTarget の違い

  • react

はじめに

event.target と event.currentTarget の違いの理解が曖昧だったため、調べました。

event.target はイベントが発生した要素、event.currentTarget はイベントハンドラが登録された要素

簡単な実験をしてみます。実験1〜3では要素にクリックイベントハンドラを登録し、イベント発生時に event.target と event.currentTarget をコンソールに出力します。

  • 実験1: button にイベントハンドラを登録した場合
  • 実験2: 親要素に div を持つ button にイベントハンドラを登録した場合
  • 実験3: 子要素に button を持つ div にイベントハンドラを登録した場合

実験1: button にイベントハンドラを登録した場合

export const App = () => {
  const handleClick = (event) => {
    console.log({
      target: event.target,
      currentTarget: event.currentTarget,
    });
  };

  return (
    <button onClick={handleClick}>click</button>
  );
};

// { target: button, currentTarget: button }

コンソールの出力より、event.target と event.currentTarget のいずれも button となりました。

実験2: 親要素に div を持つ button にイベントハンドラを登録した場合

export const App = () => {
  const handleClick = (event) => {
    console.log({
      target: event.target,
      currentTarget: event.currentTarget,
    });
  };

  return (
    <div>
      <button onClick={handleClick}>click</button>
    </div>
  );
};

// { target: button, currentTarget: button }

コンソールの出力より、event.target と event.currentTarget のいずれも button となりました。

実験3: 子要素に button を持つ div にイベントハンドラを登録した場合

export const App = () => {
  const handleClick = (event) => {
    console.log({
      target: event.target,
      currentTarget: event.currentTarget,
    });
  };

  return (
    <div onClick={handleClick}>
      <button>click</button>
    </div>
  );
};

// {target: button, currentTarget: div}

コンソールの出力より、event.target は button となりました。一方、実験1、実験2 と異なり event.currentTarget は div となりました。

これは event.target はイベントが発生した要素を表すのに対し、event.currentTarget はイベントハンドラが登録された要素を表すためです。

参考

© mokajima.com