JavaScriptのイベントバブリングとイベントキャプチャメカニズムについて

この記事では、JavaScript のイベント バブリングとイベント キャプチャの仕組みについての詳細な説明を中心に紹介します。関連情報はインターネット上にたくさんありますが、この記事を通じて皆さんに理解していただければ幸いです。以下は、JavaScript でのイベント バブリングとイベント キャプチャのメカニズムの詳細な説明です

2 つの機能は次のとおりです:

イベントをトリガーするタイミングの問題について説明します

キャプチャ

: ドキュメントからイベントをトリガーするノードまで、つまりトップダウン イベントをトリガーするには --- 外側から内側へ

イベントバブリング:

ボトムアップにイベントをトリガーするには --- 内側から外

バインディング イベント メソッドの 3 番目のパラメーターは、イベントを制御します。トリガー シーケンスがイベント キャプチャであるかどうか

true、イベント キャプチャ、false、イベント バブリング

通常、デフォルトは false、つまりイベント バブリングです

Jquery の e.stopPropagation はバブリングを防ぎます。これは、DOM、祖先レベルのイベントがトリガーされるまでバブリングを停止することを意味します。

以下は私が試したものの例です。この例では、3 番目の true、つまりイベント キャプチャを追加しました。

追加しない場合は、デフォルトのイベントバブリングが使用されます。このとき、イベントトリガーシーケンスは内側から外側へです。

以上がJavaScriptのイベントバブリングとイベントキャプチャメカニズムについての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。