イベントバブリングメカニズム
素人の用語では、親要素と子要素にそれぞれメソッドがあり、子要素メソッドがトリガーされると、親要素のメソッドもトリガーされることを意味します。
次の図に示すように、
divを作成し、divの下にボタン要素を作成し、divHandlerという名前のクリックイベントをdivにバインドし、
btnHandlerという名前のクリックイベントをボタンにバインドします。
ボタンがクリックされた（btnボタンをクリックした
）
ときにdivフィールドがクリックされた（内側のdivクリックイベントをクリックした）ときに出力されることを実現したいと考えています。
最初にdivをクリックする
と、右側のコンソールが印刷されていることがわかります（内側のdivのクリックイベントをクリックします）。
ボタンをクリックします。ボタン
のクリックメソッドがトリガーされているだけでなく、トリガーされていることもわかります。 divのクリックメソッド
上記は、イベントのバブリングメカニズムの現れです
2つの解決策を次に示し
ます。1。イベントトリガーの下部に（.stop）を追加します
。2。div（.self）の制限メカニズムを追加します。
1.イベントの下部にストップを追加します
（stopメソッドはイベントのバブリングメカニズムを完全に防ぐことができます）
2.divに制限メカニズムを追加します
selfメソッドの機能は次のとおりです。イベント関数は、現在の要素がクリックされたときにのみトリガーされます
（このメソッドはバブリングの欠陥を解決します）
バブリングメカニズムの欠陥を自己解決
最も外側のdivに自分自身を追加すると、
内側のdivは処理されません
外側のdivをクリックします
内側のdivをクリックします
ボタンをクリックします
ボタンイベントがトリガーされると、内側のdivイベントもトリガーされることがわかります。
自己追加された外側のdivのみがイベントをトリガーしません。
上記は、インシデントのバブリングメカニズムと解決策の概要です。