イベントバブリングとイベントキャプチャ

JavaScriptでイベントバブリングとイベントキャプチャがどのように機能するかをご覧ください

バブリングとキャプチャは、DOMイベントが伝播するために使用する2つのモデルです。

DOM構造が

<div id="container">
  <button>Click me</button>
</div>

ユーザーがクリックしたときを追跡したいbutton、および2つのイベントリスナーがあります。1つはボタンに、もう1つは#container

子要素をクリックすると、伝播を停止しない限り、常にその親に伝播することに注意してください(後述)。

これらのイベントリスナーは順番に呼び出され、この順序は、使用されるイベントバブリング/キャプチャモデルによって決定されます。

バブリングこれは、クリックされたアイテム(子)から、最も近いものから始めて、そのすべての親ツリーにイベントが伝播することを意味します。

この例では、buttonの前に発砲します#containerハンドラ。

キャプチャ反対です。外側のイベントハンドラーは、より具体的なハンドラーの前に起動されます。button

デフォルトでは、すべてのイベントがバブルします

3番目の引数をに適用することにより、イベントキャプチャを採用することを選択できます。addEventListener、に設定するtrue

document.getElementById('container').addEventListener(
  'click',
  () => {
    //window loaded
  },
  true
)

ご了承ください最初にすべてのキャプチャイベントハンドラが実行されます

次に、すべてのバブリングイベントハンドラー。

順序はこの原則に従います。DOMはWindowオブジェクトから始まるすべての要素を調べ、クリックされたアイテムを見つけます。その間、イベントに関連付けられているイベントハンドラーを呼び出します(キャプチャフェーズ)。

ターゲットに到達すると、Windowオブジェクトまで親ツリーまでの移動を繰り返し、イベントハンドラーを再度呼び出します(バブリングフェーズ)

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のjsチュートリアル: