JQueryのイベントバブリングとは何ですか

バブリング イベントとは、イベントが発生した後、通常、ブラウザーはまずイベントが発生した要素でイベント ハンドラーをトリガーし、次にその親要素、親要素の親要素...というように、イベントが発生するまでイベント ハンドラーをトリガーします。ルート要素までのドキュメント。バブリング イベントは、イベント伝播の最も一般的な方法です。イベントの処理後、イベントの伝播を停止し、バブリングを継続したくない場合は、イベント処理メソッドをバインドする必要があります。

このチュートリアルの動作環境: Windows7 システム、jquery3.6.1 バージョン、Dell G3 コンピューター。

イベント バブリングとは

バブリング イベントとは、特定の種類のイベントがオブジェクト上でトリガーされると、そのイベントが伝播することです。親に定義され、親オブジェクトで定義された同様のイベントをトリガーします。イベントの伝播の方向は、水の底から上昇する水の泡と同様に、下から上へです。

HTML ドキュメントは DOM ツリーを視覚化できます:

イベントのバブリング現象は次の図のように鮮やかに表現できます:

簡単に言えば:

イベントが発生した後、ブラウザは通常、最初にイベントが発生した要素でイベント ハンドラーをトリガーし、次にその親要素、親要素の親要素の順にイベント ハンドラーをトリガーします。 .. …など、ドキュメントのルート要素まで続きます。

これはイベント バブリングと呼ばれ、イベントが伝播する最も一般的な方法です。 イベントを処理した後、イベントの伝播を停止し、イベントがバブルアップし続けることを望まない場合があります。イベントの処理メソッドをバインドする必要があります。

上記のように、クリック イベントを設定します。ボタンがクリックされると、ボタンのクリック イベントがトリガーされ、対応する親要素 div がトリガーされます。 click.イベントがトリガーされ、次に本文がトリガーされてイベントがトリガーされ、ドキュメントまたはウィンドウまで同様に続きます。

バブリングの例

手順:

効果:

3 の赤枠をクリックすると、ポップアップ ボックス 3 が表示され、確認後、ポップアップ ボックス 2 が表示され、ポップアップ ボックス 1 が表示されます現れる。

2 がある黄色のボックスをクリックすると、ポップアップ ボックス 2 が表示され、次にポップアップ ボックス 1 が表示されます。

1 つが配置されている緑色のボックスをクリックすると、1 つ目のポップアップ ボックスのみが表示されます。

つまり、最初の 2 つの状況ではバブリングが発生しました。

クリック イベントが書き込まれる順序が原因であるかのように誰かが言うなら、そうではありません。イベントはすべてドキュメントが読み込まれた後に実行されます。

#泡立ちを防ぐ方法:

2 つをクリックした後の泡立ちを防ぎたい場合は、次のコードを追加します

そうすると、ポップアップ ボックス 2 はポップアップ ボックス 1 に表示されなくなります。

jquery によるイベントのバブリングの防止の例

1. デフォルトの動作をキャンセルし、false を返すことでイベントのバブリングを防止します。

jQuery コード:

$("form").bind(
　　"submit", 
　　function() { 
　　　　return false;
　　 }
);

2.デフォルトの動作をキャンセルするには、preventDefault() メソッドを使用する必要があります。

jQuery コード:

$("form").bind(
　　"submit", 
　　function(event){
　　　　　　event.preventDefault();　　
　　}
);

3. stopPropagation() メソッドを使用して、1 つのイベントのバブリングを防止するだけです。

jQuery コード:

$("form").bind(
　　"submit", 
　　function(event){
　　　　　　event.stopPropagation();　　
　　}
);

[推奨学習:

jQuery ビデオ チュートリアル 、Web フロントエンド ビデオ ]

以上がJQueryのイベントバブリングとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。