JavaScriptイベントbubble_javascriptスキルの導入と応用

1. イベント バブリングとは何ですか?
オブジェクトで特定のタイプのイベント (クリック onclick イベントなど) をトリガーします。オブジェクトがこのイベントのハンドラーを定義している場合、このイベントはこれを呼び出します。ハンドラー。このイベント ハンドラーが定義されていない場合、またはイベントが true を返した場合、このイベントは処理されるまで、このオブジェクトの親オブジェクトに内部から外部に伝播されます (親オブジェクトの同様のイベントはすべてアクティブ化されます)。 , または、オブジェクト階層の最上位レベル、つまりドキュメント オブジェクト (一部のブラウザーのウィンドウ) に到達します。

例: 地方裁判所に訴訟を起こしたい場合、そのような訴訟を扱う地方裁判所がない場合、地方の関連部門が、高等裁判所などへの控訴を継続するのを支援します。最終的に訴訟が処理されるために中央裁判所に行くまで。

2. イベント バブリングの役割は何ですか?
(1) イベント バブリングにより、複数の操作を一元的に処理できます (イベント ハンドラーの追加を回避するために、親要素にイベント ハンドラーを追加します)。複数の子要素に) を使用すると、オブジェクト レイヤーのさまざまなレベルでイベントをキャプチャすることもできます。

[集中処理の例]

コードをコピー コードは次のとおりです。

(2) 異なるオブジェクトが同じイベントを同時にキャプチャし、独自の処理を行うために独自の排他的ハンドラーを呼び出します。たとえば、上司が命令を出し、各従業員は自分の仕事をし始めました。

【同じイベントを同時にキャプチャする例】

コードをコピー コードは次のとおりです。

;div onclick="inSideWork() " id="inSide" style="width:100px; height:100px; background:#CCC">

script type="text/javascript" >
function outSideWork()
{
alert('私の名前は outSide、私は仕事をしていました...'); >function inSideWork()
{
alert('My name is inSide,I was working...')
}

//次のプログラムがクリック イベントを自動的にアクティブにするため一部のブラウザでは許可されていないため、灰色のボックスをクリックして、ここからコマンドの発行を開始してください。このようにして、バブリングにより、大きな黒いボックスもクリック イベントを受け取り、独自のハンドラーを呼び出します。内部にさらに多くのボックスがネストされている場合も、同じことが起こります。

/*
function BossOrder()
{
document.getElmentById('inSide').click();
}
bossOrder(); /



3. 注意すべき点
●イベントをキャプチャするには実際には 3 つの方法があり、イベント バブリングはその 1 つです。 (1) IE のイベントを内部から外部へバブリングする (内部→外部)。 (2) Netscape4.0 は、イベントを外部から内部へ (外部→内部) キャプチャします。 (3)DOMイベントの流れ、まず外側から内側へ、内側から外側へ原点に戻る(外側→内側→外側)イベントキャプチャ方法(オブジェクトがイベント処理を2回トリガーするようですが、これの効果は分かりません！

●すべての出来事がバブル化できるわけではありません。次のイベントはバブルしません: ブラー、フォーカス、ロード、アンロード。

●イベントのキャプチャ方法はブラウザごとに異なります。また、同じブラウザのバージョンによっても異なります。たとえば、Netscape 4.0 はキャプチャ イベント ソリューションを使用しており、他のほとんどのブラウザはバブリング イベント ソリューションをサポートしています。さらに、DOM イベント ストリームはテキスト ノード イベント バブリングもサポートしています。

●ブラウザやブラウザのバージョンによって、最上位に到達するためのイベントキャプチャの目標も異なります。 IE6 では、HTML はイベントのバブリングを受け取り、ほとんどのブラウザーはウィンドウ オブジェクト (ボディ→ドキュメント→ウィンドウ) へのバブリングを継続します。

●バブリングを防止しても、オブジェクトのデフォルトの動作は防止されません。たとえば、送信ボタンをクリックすると、フォーム データが送信されます。この動作では、カスタマイズされたプログラムを作成する必要はありません。

4. イベントの大量発生を防ぐ
通常、イベント トリガーのソースを明確にして、すべてを 1 つのステップで実行します。ブラウザが賢くなり、適切なイベント処理を無目的に見つけられるようにする必要はありません。プログラム、つまり、最も正確な目標がわかっています。この場合、イベントのバブリングは必要ありません。さらに、イベント バブリングを理解することで、プログラムがさらに余分なことを実行し、必然的にプログラムのオーバーヘッドが増加することがわかります。もう 1 つの重要な問題は、イベント バブリング処理によって、アクティブ化したくないイベントがアクティブ化される可能性があり、プログラムが混乱し、さらにはデバッグが不可能になる可能性があることです。これは、イベント バブリングに慣れていないプログラマにとっては厄介な問題となることがよくあります。したがって、必要に応じて、イベントが沸騰するのを防ぐ必要があります。

[起動したくないイベントの起動例]

コードをコピー コードは次のとおりです

Baidu のホームページを開きますが、灰色のボックスをクリックすると、2 つの Web ページが同時に開きます。実際、この問題は実際のデザインではめったに発生しません。ページの異なる DOM 深さに異なるボタンやリンクを配置した場合、深いレイヤーでトリガーされるイベントがトップレベルのボタンに影響を与えるのではないかと思われるかもしれません。いいえ、ボタンはネストされた関係を形成できないためです。
function openWin(url)
{
window.open(url);
}



以下は私がコピーしたものですインターネット A メソッド。このメソッドを正確なターゲット オブジェクト ハンドラーの最後に配置します。このイベントがトリガーされて処理されると、イベントはバブルされなくなります。

[イベントのバブリングを防ぐ例]

コードをコピー

コードは次のとおりです。

;script type ="text/javascript">

//イベントのバブリングを防止した後、灰色のボックスをクリックすると、プロセス全体でダイアログ ボックスが 1 回だけ表示されます (デフォルトとの比較に注意してください)状況)
function showMsg(obj,e)
{
alert(obj.id)
stopBubble(e)
}

//イベントバブリング関数
関数 stopBubble(e)
{
if (e && e.stopPropagation)
e.stopPropagation()
else
window.event.cancelBubble=true
}
スクリプト>