【いべんとはんどりんぐ】
イベントハンドリング とは？
最終更新:
💡 出来事を受け取り、その出来事に合う処理を動かす
クリックや読み込みなどのイベントに応じて処理する仕組み。リスナーの登録、DOMの伝播、既定動作、解除とイベント委譲を解説します。
📌 このページのポイント
- イベントの発生に応じて、登録した処理を実行する
- クリックだけでなく、読み込みなどのイベントもある
- DOMでの伝播と、ブラウザーの既定動作は別の仕組み
- リスナーの寿命と、解除方法も考えて登録する
ひよこ ボタンを押したら画面が変わるのも、イベントハンドリング？
ペンギン先生 そうだよ。クリックという出来事を受け取り、画面を変える処理を実行する。イベントには読み込みなどもあり、利用者の操作だけが対象ではないんだ。
ひよこ JavaScriptでは、どうやって待つの？
ペンギン先生 例えばaddEventListenerにイベント名と関数を渡して、リスナーを登録する。登録するときに関数を呼んでしまうのではなく、そのイベントが届いたときに呼べるよう、関数を渡すよ。
ひよこ 子のボタンを押したら、親の処理も動いたよ？
ペンギン先生 DOMのクリックイベントは、親へ伝わるバブリングがある。親側でまとめて受けるイベント委譲にも使えるんだ。ただし、すべてのイベントがバブリングするわけではない。キャプチャーという別の伝播段階もあるよ。
ひよこ stopPropagationを使えば、リンク先へ移動しなくなる？
ペンギン先生 それは伝播を止めるためのメソッドで、リンクを開くような既定動作は止めない。既定動作にはpreventDefaultを使う。ただしキャンセルできるイベントか、リスナーの設定が許すかなども確認する必要がある。
ひよこ もう使わない処理は、どうするの？
ペンギン先生 必要に応じてremoveEventListenerで解除する。登録したイベント名、同じ関数、キャプチャーの設定を合わせるよ。AbortSignalでまとめて解除する方法もある。解除しないと必ず漏れる、と決めつけず、登録先や参照の寿命を考えよう。
もっと詳しく知りたい人へ
イベント委譲では、クリックされた場所をどう知る？
event.targetは最初にイベントが発生した要素、event.currentTargetは処理中のリスナーを登録した要素です。ボタン内のアイコンなどがtargetになることもあります。親で受ける場合は、対象となる子要素かを確かめてから処理します。
Reactでも、関数を呼んで登録する？
例えばonClick={handleClick}のように関数を渡します。onClick={handleClick()}は描画時に呼ぶ式で、その戻り値を渡すことになります。引数が必要ならonClick={() => handleClick(id)}のように、後で呼ばれる関数に包む方法があります。
まとめ：ざっくりこれだけ覚えればOK！
「イベントハンドリング」って出てきたら「出来事に応じて処理を動かす仕組み」と思えばだいたいOK！
📖 おまけ：英語の意味
「Event Handling」 ＝ イベントへの対処・処理
💬 eventは出来事、handlingは対処することです。WebのDOMイベントだけでなく、さまざまなシステムで出来事に応じた処理を指します。