イベントバブルとは何かjqueryでイベントバブルを阻止する方法

(1)何が事件の泡立ちですか
まず、1つのイベントが発生したとき、そのイベントには常にイベントソースがあります.つまり、このイベントを引き起こしたオブジェクトは、1つのイベントが空で発生することはできません.これがイベントの発生です.
事件が発生すると、この事件は伝播し始めます.なぜ伝播するのか.イベントソース自体にイベントを処理する能力がないからです.例えば、ボタンをクリックすると、clickイベントが発生しますが、このボタン自体はこのイベントを処理できません(くだらない話)、イベントはこのボタンから伝播して、このイベントを処理できるコードに到達しなければなりません(例えば、ボタンのonclickに関数の名前を付けて、この関数にボタンのclickイベントを処理させます).
イベントが伝播する過程で、それを処理できる関数が見つかったとき、私たちはこの関数がこのイベントを捉えたと言います.
ここまで言うと、肝心な問題が来ました.それは関数がどのようにしてイベントをキャプチャしたのかということです.これは事件の泡にかかわる.
泡の概念をよりよく理解するために、今あなたの前に水が置いてあることを想像することをお勧めしますが、この水は私たちが普段見ているのとは少し違います.それは数層に分けられ、各層は1つ以上の領域に分けられ、最上階は私たちがよく知っているウィンドウオブジェクト(windowオブジェクト)、次の層はいくつかの領域(documentオブジェクト、historyオブジェクトなど)に分けられています.一方、documentオブジェクトの次のレイヤは複数のサブオブジェクトに分かれています.
これらのオブジェクトの階層関係はDOMのオブジェクトツリーを構成する.
イベントの伝播には方向性があり、ボタンをクリックすると発生したイベントはこのボタンから上へ伝播します(カップの底から泡が上がっているように、これがイベントの泡と呼ばれる理由です).しかし、このイベントは常に特定の属性に値があるかどうかを探します.例えば、ボタンのclickイベントは、ボタンにonclick属性があるかどうかの意味のある定義(すなわち、その属性が存在する関数または実行可能な文を指す)を先に探し、ある場合は、この関数または文を実行します.その後、イベントは上へ伝播し続け、ボタンの上位オブジェクト(formオブジェクトやdocumentオブジェクト、つまりボタンを含む親オブジェクトなど)に到達し、オブジェクトがonclickプロパティも定義されている場合、プロパティの値を実行します.
したがって、このボタンの上に3つのレイヤ(form、document、window)があり、この3つのレイヤがonclickプロパティを定義している場合、ボタンのclickイベントが発生すると、4つの(ボタン自体を含む)関数が呼び出されたり、4つの文が実行されたりします.
イベントのこれらの特性は、レベル0 domでも適用されます.
(2)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(); 
  
　　} 
  
); 
  
 
 

(3)jsイベントの発泡に関する検証
今日のこの問題は主にいくつかのキーワードに関連している:オブジェクト、トリガイベント、キャプチャイベント、実行処理、バブル.これは実はjs全体が実行するプロセスです.中には泡が出るという過程が面白い.実は1杯の水のようですが、この水は階層的で、一番下は現在トリガーされているイベントの対象です.そして上の範囲が大きいほど、最上階はwindowに違いなく、最後から2番目の層はdocumentです.バブルは、フローティング中に現在到達しているレイヤにバインドされたイベント処理方法があるかどうかを判断します.話があれば相応の処理を実行する.ないと泡が立ち続けます.最上位のwindowウィンドウレイヤに到達するまで.イベントの発泡を阻止するために、任意の層で対応する処理を行うことができます.方法は、イベントオブジェクトのバブルを阻止する方法です.event.stopPropagation();次はjsイベントの発泡を検証するプロセス方法を書きます.

 
  
 
  <br>$(document).ready(function(){ 
  <br>$('.one').click(function(e){ 
  <br>alert('one'); 
  <br>});　　　　　　　　　　　　 
  <br>$('.two').click(function(e){ 　 
  <br>alert('two'); 
  <br>}); 
  <br>$('.three').click(function(e){ 
  <br>alert('three'); 
  <br>//            
  <br>// e.stopPropagation(); 
  <br>}); 
  <br>}); 
  <br> 
  
 
  
one 
  
 
  
two 
  
 
  
three 
  
 
  
 
  
 
  
 
 

(4)まとめ
1.一つのイベントバブル対応トリガは上層部の同一イベントである
特殊:twoがダブルクリックイベントに設定されている場合、twoをクリックするとoneクリックイベントがトリガーされます
(クリックを含むダブルクリック)
2.clickイベントで、処理するイベントの前にe.preventDefault()を追加する場合.
では、動作をキャンセルし(一般的にはreturn操作をしたことに相当)、後の文を実行しません.
3.e.stopPropagation()clickイベント内であれば、上位clickイベントはトリガーされません.