1。イベントフロー
HTML要素がイベントをトリガーする順序。
2。イベントバブルIEのイベントストリームはイベントバブルと呼ばれます。つまり、イベントは最も具体的な要素（ドキュメント内の最も深いネストレベルを持つノード）から始まり、段階的に段階的に特定のノード（ドキュメント）を伝播します。 3.イベントキャプチャイベントキャプチャのアイデアは、特定のノードがそれほど以前にイベントを受信する必要があるのに対し、最も特定のノードは最後にノードを受信する必要があることです。イベントキャプチャの目的は、事前に決められたターゲットに到達する前にイベントをキャプチャすることです。
DOMイベントストリーム
「DOM2レベルのイベントフロー」で指定されたイベントフローには、イベントキャプチャステージ、ターゲットステージ、バブルステージの3つのステージが含まれます。最初に起こることは、イベントキャプチャです。これは、イベントを傍受する機会を提供します。その後、実際のターゲットがイベントを受け取ります。最後の段階はバブルフェーズで、イベントに対応できます。単純なHTMLページを例にとると、<div>要素をクリックすると、以下に示す順序でイベントがトリガーされます。
DOMイベントストリームでは、実際のターゲット（<div>要素）は、キャプチャフェーズ中にイベントを受け取りません。これは、キャプチャフェーズ中に、イベントがドキュメントの後に<HTML>、次に<Body>に停止することを意味します。次の段階は「ターゲットを絞った」段階であるため、イベントは<div>で発生し、イベント処理のバブルフェーズの一部として見られます。次に、バブルフェーズが発生し、イベントがドキュメントに戻ります。
DOMイベントストリーミングをサポートするほとんどのブラウザは、特定の動作を実装しています。 「DOM2レベルイベント」の仕様では、キャプチャステージにイベント、Safari、Chrome、Firefox、およびOpera9.5以降のターゲットが関与しないことが明確に要求されていますが、キャプチャ段階でイベントオブジェクトのイベントをトリガーします。その結果、ターゲットオブジェクトでイベントを操作する2つの機会があります。
バブルからイベントを停止します
実験
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <script = "text/javascript"> function onbtn（）{alert（ 'button'）; // cancelbubble（）;イベントバブルを防ぐ} //イベントオブジェクト関数を取得getEvent（）{// IEまたはCHROMEIF（window.event）{return window.event;} // firefoxfunc = getevent.caller; //（func！= null）{var arg0 = func.arguments [0]; //発信者の最初のパラメーターを取得する//パラメーターが空であるかどうかを判断する場合は（arg0）{// arg0がイベントオブジェクトであるかどうかを判断します（（arg0.constructor == event || constructor == mouseevent || arg0.constructor == keyboardEvent）||（typeof）= = "オブジェクト" && arg0.preventevauty arg0.StopPropagation））{return arg0; }} // get func caller func = func.caller;} return null;} // block event bubbles function cancelbubble（）{event = getevent（）; // firefox chrome if（event.preventdefault）{event.preventdefault（）; event.stoppropagation（）; } else {// ie event.cancelbubble = true; event.returnValue = false; }} </script> </head> <body onclick = "alert（ 'body'）"> <div onclick = "alert（ 'div'）;" style = "background-color：green"> <button onclick = "onbtn（）"> dsd </button> </div> </body> </html>上記のHTMLコードは、イベントトリガーの順序で実行されます。
デフォルト： 'ボタン'がポップアップします---》がポップアップします 'div' ----》は「ボディ」をポップアップします
cancelbubble（）コードを追加すると、 'Button'がポップアップ表示されます
上記の記事には、JS DOMイベントメカニズムを深く理解しています。それは私があなたと共有したすべてのコンテンツです。私はそれがあなたに参照を与えることができることを願っています、そしてあなたがwulin.comをもっとサポートできることを願っています。