blog

DOM イベントとイベントデリゲート

DOM イベント\ndom オブジェクトは、ユーザーが一連のアクションに反応することを可能にします。\nマウスのクリック\nマウスのダブルクリック\nマウスの右クリック\nマウスダウン、マウスアップ、...

Sep 4, 2020 · 2 min. read
シェア

DOM

domオブジェクトは、ユーザーが一連のアクションに反応することを可能にします。jsはイベントの発生時に実行することができます。

  • マウスのクリック
  • マウスをダブルクリックします。
  • マウスを右クリックします。
  • マウスダウン、マウスアップ、マウスダウン、マウスダウン、マウスダウン。
  • ページの読み込みが終了しました
  • キーボードが押されました
  • 入力フィールドの変更

キャッチとバブリング

domのデータ構造はツリーなので、ユーザーが要素を操作すると、その親ノードや祖先ノードも操作することになります。そこで、これらのノードがイベントリスナー関数にフックされているとします。イベントが発生したとき、プログラムの実行順序はどうなるでしょうか?

w3cの仕様では、このプロセスはキャプチャとバブルです。キャプチャーとは、先祖ノードから現在のノードまで順番に関数が実行されることです。バブルはその逆です。このような処理の場合、この分岐上の関数はキャプチャとバブリングの段階で1回ずつ実行する必要があります。そこで、こちら側で、どの段階でイベントリスナーの関数を実行するかを設定できるようにすると、以下のようなコードになります:

element.addEventListener("click",fn,true) //フェーズの実行をキャプチャする
element.addEventListener("click",fn) //デフォルトのバブリングフェーズでは

イベントの委譲

現在存在しない要素のイベントをリッスンしたい場合は、イベント・デリゲートを使用します。イベントデリゲートは、イベントリスナー関数を親ノードにバブリングすることで実装されます。こうすることで、新しい要素が親ノードを通過してイベントを発生させます。

もう一つの用途は、同じ機能を果たすノードを多数リッスンする可能性があることです。すべてのノードをリッスンするのはメモリの無駄遣いです。そこで、イベントデリゲートを使用して、これらの要素の祖先ノードをリッスンすることができます。このようにして、バブリング時に、現在のターゲット対象がリッスンする要素の1つであるかどうかを判断します。

デフォルトアクションのブロック

preventDefault() メソッドを使用します。このメソッドは、ブラウザのレンダリング時にデフォルトのアクションが通常どおり実行されないように動作しますが、イベントは伝搬し続けます。

バブリングのキャンセル

e.stopPropagation() //キャプチャとバブリングのフェーズで、現在のイベントがさらに伝搬するのを防ぐ。
Read next

jsはデータ型を決定する。

オブジェクトを配列型として判定する方法を説明する前に、jsのデータ型を整理しておきましょう。jsには、数値、文字列、オブジェクト、ブール値、null、undefinedの合計6つのデータ型があります。\nvar str="stri

Sep 3, 2020 · 1 min read