イベント バブリング メカニズムが 2 回トリガーされるのはなぜですか?
Feb 25, 2024 am 09:24 AM
イベントのバブリングが 2 回連続して発生するのはなぜですか?
イベント バブリングは Web 開(kāi)発における重要な概念です。これは、ネストされた HTML 要素でイベントがトリガーされると、イベントが最も內(nèi)側(cè)の要素から最も外側(cè)の要素までバブルアップすることを意味します。このプロセスは時(shí)々混亂を引き起こす可能性があり、よくある問(wèn)題の 1 つは、イベントのバブリングが 2 回続けて発生することです。
イベント バブリングが 2 回連続して発生する理由をより深く理解するために、まずコード例を見(jiàn)てみましょう:
<div id="outer">
<div id="inner">
<button id="button">Click me</button>
</div>
</div>
<script>
document.getElementById('button').addEventListener('click', function() {
console.log('Button clicked');
});
document.getElementById('inner').addEventListener('click', function() {
console.log('Inner div clicked');
});
document.getElementById('outer').addEventListener('click', function() {
console.log('Outer div clicked');
});
</script>上記のコードは、最も外側(cè)の ## を含むネストされた HTML 構(gòu)造を作成します。 #
要素 (id="outer")、ネストされた >gt; 要素 (id="inner")、および Button 要素 (id="button")。 このコードでは、各要素のクリック イベント リスナーを追加して、対応する要素のクリックに関する情報(bào)を出力します。ページ上のボタンをクリックすると、予期される出力は次のようになります: Button clicked Inner div clicked Outer div clickedただし、実際の出力は次のようになります:
Button clicked Inner div clicked Outer div clicked Inner div clicked Outer div clickedご覧のとおり、イベント バブリングが 2 回続けて発生します。 . 回、イベント処理関數(shù)が繰り返し実行されます。 この問(wèn)題の根本原因は、イベント バブリング フェーズの実行順序にあります。バブリングフェーズでは、イベントは最も內(nèi)側(cè)の要素から外側(cè)の要素までバブルアップし、親要??素のイベント ハンドラー関數(shù)を段階的に実行します。したがって、ボタンをクリックすると、クリック イベントは最初にボタンのイベント ハンドラーをトリガーし、次にネストされた
要素までバブルアップして、要素のイベント ハンドラーの実行を継続します。ただし、 要素は最も外側(cè)の 要素にもネストされているため、イベントは再び最も外側(cè)の要素までバブルアップされ、その結(jié)果、最も外側(cè)のイベント ハンドラーが生成されます。関數(shù)が再度実行されます。 この問(wèn)題を解決するには多くの方法があります。一般的に使用される 2 つの方法を紹介します: - イベントのバブリングを停止する:
イベント処理関數(shù)のevent.stopPropagation()メソッドを使用すると、イベントのさらなる伝播を防ぐことができます。つまり、イベントのバブリングを停止できます。上記のコード例のボタンのイベント ハンドラー関數(shù)を次のように変更します。
document.getElementById('button').addEventListener('click', function(event) {
console.log('Button clicked');
event.stopPropagation(); // 阻止事件冒泡
}); event.stopPropagation() メソッドを使用した後、イベントのバブリングはボタン要素で停止し、ネストされた
要素と最も外側(cè)の 要素では、埋め込み要素には伝播されません。したがって、イベント処理関數(shù)は 1 回だけ実行され、出力結(jié)果は次のようになります。 Button clicked
- モニタリング キャプチャ フェーズ:
要素のイベント ハンドラー関數(shù)を次のように変更します。 document.getElementById('outer').addEventListener('click', function() {
console.log('Outer div clicked');
}, true); // 添加 true 參數(shù)表示監(jiān)聽(tīng)捕獲階段
パラメータ true を最も外側(cè)の要素 Event に追加します。リスナーはキャプチャフェーズ中にイベント処理関數(shù)を?qū)g行できます。このようにして、イベントのバブリング段階では、イベントによって最も外側(cè)の要素のイベント処理関數(shù)が再度トリガーされることがなくなり、繰り返しの実行が回避されます。
event.stopPropagation() メソッドを使用してイベントのバブリングを防ぐか、キャプチャ フェーズをリッスンしてイベントを処理して繰り返し実行を避けることができます。
以上がイベント バブリング メカニズムが 2 回トリガーされるのはなぜですか?の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫(huà)像を無(wú)料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無(wú)料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡(jiǎn)単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無(wú)料のコードエディター
SublimeText3 中國(guó)語(yǔ)版
中國(guó)語(yǔ)版、とても使いやすい
ゼンドスタジオ 13.0.1
強(qiáng)力な PHP 統(tǒng)合開(kāi)発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開(kāi)発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
Lauiuiログインページでジャンプを設(shè)定する方法
Apr 04, 2024 am 03:12 AM
Layui ログインページジャンプ設(shè)定手順: ジャンプコードの追加: ログインフォーム送信ボタンクリックイベントに判定を追加し、ログイン成功後、window.location.href 経由で指定ページにジャンプします。フォーム構(gòu)成を変更します。lay-filter="login" のフォーム要素に非表示の入力フィールドを追加します。名前は「redirect」、値はターゲット ページ アドレスです。
vueで畫(huà)像にタッチイベントを追加する方法
May 02, 2024 pm 10:21 PM
Vueで畫(huà)像にクリックイベントを追加するにはどうすればよいですか? Vue インスタンスをインポートします。 Vue インスタンスを作成します。 HTML テンプレートに畫(huà)像を追加します。 v-on:click ディレクティブを使用してクリック イベントを追加します。 Vue インスタンスで handleClick メソッドを定義します。
Honmeng HarmonyOS と Go 言語(yǔ)の開(kāi)発
Apr 08, 2024 pm 04:48 PM
HarmonyOS と Go 言語(yǔ)開(kāi)発の概要 HarmonyOS は Huawei が開(kāi)発した分散オペレーティング システムであり、Go は最新のプログラミング言語(yǔ)であり、この 2 つの組み合わせにより、分散アプリケーション開(kāi)発のための強(qiáng)力なソリューションが提供されます。この記事ではHarmonyOSでの開(kāi)発におけるGo言語(yǔ)の使い方を紹介し、実踐事例を通して理解を深めていきます。インストールとセットアップ Go 言語(yǔ)を使用して HarmonyOS アプリケーションを開(kāi)発するには、まず GoSDK と HarmonyOSSDK をインストールする必要があります。具體的な手順は次のとおりです。 #GoSDK のインストールgogetgithub.com/golang/go#Set PATH
VUEのボタンに関數(shù)を追加する方法
Apr 08, 2025 am 08:51 AM
HTMLテンプレートのボタンをメソッドにバインドすることにより、VUEボタンに関數(shù)を追加できます。 VUEインスタンスでメソッドを定義し、関數(shù)ロジックを書(shū)き込みます。
同時(shí)プログラミングにおける C++ 関數(shù)のイベント駆動(dòng)メカニズムとは何ですか?
Apr 26, 2024 pm 02:15 PM
並行プログラミングのイベント駆動(dòng)メカニズムは、イベントの発生時(shí)にコールバック関數(shù)を?qū)g行することによって外部イベントに応答します。 C++ では、イベント駆動(dòng)メカニズムは関數(shù)ポインターを使用して実裝できます。関數(shù)ポインターは、イベントの発生時(shí)に実行されるコールバック関數(shù)を登録できます。ラムダ式ではイベント コールバックを?qū)g裝することもでき、匿名関數(shù)オブジェクトの作成が可能になります。実際のケースでは、関數(shù)ポインタを使用して GUI ボタン??のクリック イベントを?qū)g裝し、イベントの発生時(shí)にコールバック関數(shù)を呼び出してメッセージを出力します。
CSSでdivは何を意味しますか
Apr 28, 2024 pm 02:21 PM
CSS の DIV は、コンテンツのグループ化、レイアウトの作成、スタイルの追加、および対話機(jī)能に使用されるドキュメントの區(qū)切り文字またはコンテナです。 HTML では、DIV 要素は構(gòu)文 <div></div> を使用します。ここで、div は屬性とコンテンツを追加できる要素を表します。 DIV は、ブラウザ內(nèi)の 1 行全體を占めるブロックレベルの要素です。
Javaでのvoidの使用法
May 01, 2024 pm 06:15 PM
Java の void は、メソッドが値を返さないことを意味し、操作の実行やオブジェクトの初期化によく使用されます。 void メソッドの宣言形式は void methodName() で、呼び出しメソッドは methodName() です。 void メソッドは、1. 値を返さずに操作を?qū)g行する、2. オブジェクトを初期化する、3. イベント処理操作を?qū)g行する、4. コルーチンに使用されます。
Webページ要素を取得するJavaScriptの詳細(xì)説明
Apr 09, 2024 pm 12:45 PM
回答: JavaScript には、ID、タグ名、クラス名、CSS セレクターの使用など、Web ページ要素を取得するためのさまざまな方法が用意されています。詳細(xì)説明: getElementById(id): 一意の ID に基づいて要素を取得します。 getElementsByTagName(tag): 指定されたタグ名の要素グループを取得します。 getElementsByClassName(class): 指定されたクラス名の要素グループを取得します。 querySelector(selector): CSS セレクターを使用して、最初に一致した要素を取得します。 querySelectorAll(selector): CSS セレクターを使用して一致するものをすべて取得します
