イベントハンドリングとは何ですか？

クリックやキー入力などのユーザー操作やシステムの出来事（イベント）を検知して、それに応じた処理を実行する仕組み。

イベントハンドリングのポイントは？

addEventListener() でイベントの種類と実行する関数（ハンドラ）を紐づける。click, input, submit, keydown, scroll など多種多様なイベントが用意されている。Reactでは onClick, onChange などのpropsでイベントハンドラを直接JSXに書く。イベントの伝搬（バブリング）を理解することで、親子要素のイベント制御ができる

【いべんとはんどりんぐ】

イベントハンドリングとは？

💡 「何か起きたら、こう動く」を決めておくプログラムの反射神経

📌 このページのポイント

addEventListener() でイベントの種類と実行する関数（ハンドラ）を紐づける
click, input, submit, keydown, scroll など多種多様なイベントが用意されている
Reactでは onClick, onChange などのpropsでイベントハンドラを直接JSXに書く
イベントの伝搬（バブリング）を理解することで、親子要素のイベント制御ができる

イベント処理の流れ

ひよこ

イベントって具体的にどんなものがあるの？

ペンギン先生

ボタンのクリック（click）、テキスト入力（input）、フォーム送信（submit）、マウスの移動（mousemove）、スクロール（scroll）など。ブラウザはユーザーのあらゆる操作をイベントとして検知してくれる。

ひよこ

バブリングってなに？

ペンギン先生

ボタンをクリックすると、そのボタンのイベント→親のdivのイベント→さらに親の…と泡のように上に伝わっていく。これがバブリング。event.stopPropagation() で伝搬を止められる。意図しない親要素の反応を防ぐのに使う。

ひよこ

ReactとVanilla JSでイベントの書き方は違う？

ペンギン先生

Vanilla JSは element.addEventListener('click', handler) と書く。Reactは

ひよこ

イベントリスナーを大量に登録するとパフォーマンスに影響あるの？

ペンギン先生

あるよ。リスト1000行にそれぞれクリックイベントを付けると1000個のリスナーが登録されてメモリを食う。そこで使うのが「イベントデリゲーション」。親要素に1つだけリスナーを付けて、event.targetでクリックされた子要素を判定する。バブリングの仕組みを活用した効率的なテクニックだよ。

ひよこ

イベントリスナーの解除を忘れるとメモリリークになるって本当？

ペンギン先生

本当だよ。SPAで画面遷移するときに古いリスナーを解除しないと、表示されていないコンポーネントのリスナーがメモリに残り続ける。Reactのuseeffectでreturnにクリーンアップ関数を書くのはまさにこの対策。addEventListenerしたらremoveEventListenerする習慣をつけるのがメモリリーク防止の基本だよ。

まとめ：ざっくりこれだけ覚えればOK！

イベントハンドリングって出てきたら「ユーザー操作に反応して処理を動かす仕組み」と思えばだいたいOK！

📖 おまけ：英語の意味

「event handling」＝出来事の取り扱い

💬 event は「出来事」、handling は「扱い」で、発生した出来事に対処すること

← 用語集にもどる

イベントハンドリング とは？

イベントハンドリングとは？