DOM : DOMイベント – 生成AI時代のプログラミング学習

dom_dom0500_001

クリックイベントを登録するには、button.addEventListener(( A ), handler, ( B )) のように書ける。ここで ( A ) はイベントタイプ、( B ) はキャプチャリングを有効にするために true を指定できるオプションである。

入力フィールドの値変更に反応したいとき、IME合成中も逐次反応するイベントは ( A )、フォーム送信直前に最終値が確定するイベントは ( B ) である。

イベント委譲では、親要素1箇所にリスナーを付けて if ( ( A ).matches(“.item”) ) { … } のように分岐する。( A ) には実際にイベントを発生させた要素を表すプロパティ、親側の要素を指すのは ( B ) である。

デフォルト動作を止めるには ( A ) を呼ぶ。イベントの伝播（親へ上がること）自体を止めるには ( B ) を呼ぶ。

addEventListener(“click”, handler, { ( A ): true }) とすると、そのリスナーは最初の1回だけ実行され自動で解除される。またスクロール系でパフォーマンスを重視し、ブラウザの既定動作を高速化するヒントを与えるフラグは ( B ) である。

キーボードイベントで、押された物理キーの位置に依存しない意味的な値は ( A )、US配列基準の物理位置を示す値は ( B ) で得られる。

removeEventListener でリスナーを外すには、登録時と同じ ( A ) と ( B ) を渡す必要がある。無名関数を使うと同一性が保てず解除できない。

イベント伝播の段階は「キャプチャリング → ターゲット → バブリング」。数値で表す event.eventPhase では、キャプチャは ( A )、バブリングは ( B ) である。

フォーム送信時、JavaScriptで検証して不正なら送信を止める。form.addEventListener(“submit”, e => { if (!valid) ( A ); }); とし、HTML側でブラウザ標準バリデーションを無効にするには form に ( B ) 属性を付ける。

ネストしたリスナーで、同一要素内の他のハンドラも含めて即座に止めたい場合は ( A ) を使う。単に親要素への伝播だけを止めたい場合は ( B ) を使う。