DOM イベント ステージとイベント キャプチャおよびイベント バブリング実行シーケンス (詳細なグラフィックとテキストの説明)_jquery
よく言われるように、優れた記憶力は悪いペンほど優れていません。多くの技術的な記事を完全に理解していないと、すぐに技術的な内容を忘れてしまいます。エディターは通常閲覧しており、私があなたと共有するためにまとめたメモです。
開発プロセス中、私たちは皆、他の人の成熟したフレームワークを使用することを望んでいます。なぜなら、巨人の肩に乗ることで開発の効率が大幅に向上するからです。しかし、私たちはその基本原則も理解する必要がありますし、理解する必要があります。たとえば、DOM イベントの場合、jquery フレームワークは、さまざまなブラウザーのさまざまな動作をカプセル化して抽象化するのに役立ち、イベント処理に大きな利便性をもたらします。しかし、ブラウザは徐々に統一化・標準化が進み、公式に標準化されたインターフェースをより安全に利用できるようになりました。なぜなら、多くの開発者の心を掴むことによってのみ、ブラウザーはさらに前進できるからです。下位バージョンのブラウザを使用して特定のページを開くのと同じように、そのページにアクセスするには Chrome などの高度なブラウザを使用するように指示されます。しかし、これは革命的なプロセスであり、私たちのウェブページをより多くの人に提供するためには、これらの歴史的問題とよりよく適合する必要があります。互換性を保つには、フレームワークに依存するだけでなく、その基本原則を理解する必要があります。
DOM イベントの 3 つのステージ
DOM イベントがトリガーされると、オブジェクト自体で 1 回トリガーされるだけではなく、次の 3 つの異なる段階を経ます。
1. キャプチャ フェーズ : まず、ドキュメントのルート ノード ドキュメントからイベント トリガー オブジェクトに移動し、イベント オブジェクトを外側からキャプチャします。
2. ターゲットステージ : ターゲットイベントの場所 (インシデントが発生した場所) に到着し、イベントをトリガーします。
3. バブル ステージ: 次に、ターゲット イベントの場所からドキュメントのルート ノードまでトレースバックし、イベント オブジェクトを内側から外側にバブルします。
引用元:
実験部分
オンライン エディタを開きます:
http://jsbin.com/goqede/edit?html,css,js,output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-">
<title>Document</title>
<style>
#outer{
text-align: center;
width: px;
height: px;
background-color: #ccc;
margin: auto;
}
#middle{
width: px;
height: px;
background-color: #f;
margin: auto;
}
#inner{
width: px;
height: px;
background-color: #f;
margin: auto;
border-rad
}
</style>
</head>
<body>
<div id='outer'>
<span>outer</span>
<div id='middle'>
<span>middle</span>
<div id='inner'>
<span>inner</span>
</div>
</div>
</div>
<script>
function $(element){
return document.getElementById(element);
}
function on(element,event_name,handler,use_capture){
if(addEventListener){
$(element).addEventListener(event_name,handler,use_capture);
}
else{
$(element).attachEvent('on'+event_name,handler);
}
}
on("outer","click",o_click_c,true);
on("middle","click",m_click_c,true);
on("inner","click",i_click_c,true);
on("outer","click",o_click_b,false);
on("middle","click",m_click_b,false);
on("inner","click",i_click_b,false);
function o_click_c(){
console.log("outer_捕获");
alert("outer_捕获");
}
function m_click_c(){
console.log("middle_捕获")
alert("middle_捕获");
}
function i_click_c(){
console.log("inner_捕获")
alert("inner_捕获");
}
function o_click_b(){
console.log("outer_冒泡")
alert("outer_冒泡");
}
function m_click_b(){
console.log("middle_冒泡")
alert("middle_冒泡");
}
function i_click_b(){
console.log("inner_冒泡")
alert("inner_冒泡");
}
</script>
</body>
</html>
middle_capture
インナーキャプチャ
インナーバブル
middle_bubble
アウターバブル
イベント要素に到達するまで、まず外側から内側に向かってイベントがキャプチャされ、その後内側から外側に向かってルート ノードまでバブルアップしていることがわかります。
ヒント:対象ステージでイベントがトリガーされると、イベント登録の順序に従って実行されます。他の 2 つのステージでの登録順序は、イベントの実行順序には影響しません。つまり、バブリングイベントとキャプチャイベントの両方がここに登録されている場合、登録された順に実行されます。
たとえば、上記の順序に従って「inner」をクリックすると、実際に必要な答えが表示されます。
イベント登録シーケンスが次のコードに変更された場合:
外側をクリックすると:
中央をクリックすると:
内側をクリックすると:
対象ステージのイベント要素に対するイベントの実行順序は、イベント登録の順序によって決まることがわかります
上記の内容は、この記事のDOMイベントステージとイベントキャプチャとイベントバブリングの実行シーケンスです(詳細な写真とテキスト)が、皆様の今後の仕事や勉強に役立つことを願っています。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7356
15
1628
14
1353
52
1265
25
1214
29
JavaScript の一般的なイベント バブリング メカニズムをマスターする
Feb 19, 2024 pm 04:43 PM
JavaScript における一般的なバブリング イベント: 一般的なイベントのバブリング特性を習得するには、特定のコード例が必要です。 はじめに: JavaScript では、イベント バブリングとは、イベントが最も深いネスト レベルを持つ要素から開始され、イベントが終了するまで外側の要素に伝播することを意味します。最も外側の親要素に伝播します。一般的なバブリング イベントを理解し、習得することは、ユーザー インタラクションやイベント処理をより適切に処理するのに役立ちます。この記事では、一般的なバブリング イベントをいくつか紹介し、読者の理解を助ける具体的なコード例を示します。 1. クリックイベント（クリック
MacBook Proでスクリーンショットを撮る方法
Jul 19, 2023 pm 07:53 PM
このガイドでは、MacBook Pro でスクリーンショットを撮るために何をしなければならないかを説明します。 MacBook は洗練されたデザインと強力なパフォーマンスで知られていますが、これらの強力なラップトップには、見落とされがちな便利な機能が数多く搭載されています。機能の 1 つは、スクリーンショットをキャプチャするための組み込みツールです。この記事では、画面全体をキャプチャするか、画面の特定の部分だけをキャプチャするかにかかわらず、MacBook Pro でスクリーンショットを撮る方法をステップごとに説明します。スクリーンショットとは何ですか?スクリーンショット (スクリーンショットとも呼ばれます) は、画面に表示されている項目を記録するためにコンピューターまたはモバイル デバイスによって撮影されたデジタル画像です。スクリーンショットは通常、ファイルとして簡単に保存できない画像やテキストの記録を作成したり、他のユーザーと画面ビューを共有したり、次のようなガイドやチュートリアルを作成したりするために使用されます。
クリック イベント バブリングを探索し、フロントエンド開発の重要な原則を習得します
Jan 13, 2024 am 10:56 AM
クリック イベント バブリングを学習し、フロントエンド開発の主要な概念をマスターします。特定のコード例が必要です。フロントエンド開発は今日のインターネット時代において重要な分野であり、イベント バブリングはフロントエンド開発における重要な概念の 1 つです。イベント バブリングを理解して習得することは、効率的なフロントエンド コードを作成するために重要です。この記事では、イベント バブリングとは何か、およびフロントエンド開発でイベント バブリングの概念を使用する方法を紹介します。 1. イベント バブリングとは何ですか? イベント バブリングとは、要素上のイベントがトリガーされると、最初に最も内側の要素から開始され、その後段階的に親要素に進むことを意味します。
Windows 2023 でスクリーンショットを撮る方法完全ガイド
Jul 15, 2023 pm 05:34 PM
Windows でスクリーンショットを撮る Windows でスクリーンショットを撮る最も簡単な方法は、キーボードの Print Screen (PrtScn) キーを使用することです。このキーは通常、キーボード レイアウトの右側にあり、スクリーンショットを作成する最も直接的な方法です。 Windows デスクトップまたはラップトップのキーボードで「PrtScn」ボタンを押すと、スクリーンショット キャプチャ モードになり、画面が暗くなり、下の画像に示すように画面の上部中央に小さなメニューが表示されます。実行できる手順は次のとおりです。 「PrtScn」キーを押します。ペイントやフォトショップなどの画像編集ツールを開きます。 「Ctrl+V」を押してスクリーンショットを貼り付けます。必要に応じて編集し、スクリーンショットを保存します。ただし、PrtScn
どの JS イベントが上向きに伝播されませんか?
Feb 19, 2024 am 08:17 AM
バブルしない JS イベントはどれですか? JavaScript では、イベント バブリングとは、要素がイベントをトリガーすると、イベントがドキュメント ルート ノードにバブリングされるまで、上位レベルの要素にバブリングされることを意味します。イベント ハンドラーは、バブルアップされた順序で実行されます。ただし、すべてのイベントがバブル化するわけではありません。一部のイベントは、トリガーされた後、上位レベルの要素にバブリングせずに、ターゲット要素のイベント ハンドラーのみを実行します。以下に、バブルしない一般的なイベント、フォーカス イベントとブラー イベントをいくつか示します。
クリック イベント バブリングを利用して Web ページのインタラクション エクスペリエンスを向上させる方法
Jan 13, 2024 pm 02:23 PM
クリック イベント バブリングを使用して、より柔軟な Web ページ インタラクション エクスペリエンスを実現する方法 はじめに: フロントエンド開発では、Web ページの一部の要素にクリック イベントを追加する必要がある状況によく遭遇します。ただし、ページ内に多数の要素がある場合、各要素にクリック イベントを追加するのは非常に面倒で非効率的になります。クリック イベント バブリングは、パブリックの親要素にクリック イベントを追加して、より柔軟な Web ページ インタラクション エクスペリエンスを実現することで、この問題の解決に役立ちます。 1. クリック イベント バブリングの原理 クリック イベント バブリングとは、要素上のクリック イベントがトリガーされるときを指します。
キャプチャが先か、バブルが先か?イベントプロセスの長所と短所を分析する
Feb 21, 2024 pm 02:36 PM
キャプチャが先か、バブルが先か?イベント プロセスの長所と短所の分析 イベント プロセスは Web 開発における重要な概念であり、イベントの発生から処理までのプロセスを表します。イベントを処理するときは、キャプチャしてからバブルする、およびバブルしてからキャプチャするという 2 つの主なプロセス モデルがあります。これら 2 つのモデルには、さまざまなシナリオで独自の長所と短所があるため、実際の状況に基づいて適切なモデルを選択する必要があります。最初にキャプチャしてからバブリングするということは、イベント バブリング フェーズの前にイベント キャプチャ フェーズが実行されることを意味します。イベント キャプチャ フェーズは、イベント ターゲットのルート ノードから開始され、ターゲット要素に到達するまで段階的に続行されます。
クリック イベントのバブリング メカニズムと Web ページ インタラクションへの影響
Jan 13, 2024 pm 02:34 PM
クリック イベント バブリングの役割と Web ページ インタラクションへの影響 Web 開発において、イベントはインタラクションを実現し、ユーザー操作に応答するための鍵となります。その中でも、イベント バブリングは、入れ子になった要素階層内のイベントに複数の要素が同時に応答できるようにする一般的なイベント メカニズムです。この記事では、クリック イベント バブリングの役割と Web ページ インタラクションへの影響について詳しく説明し、いくつかの具体的なコード例を示します。 1. クリック イベント バブリングの概念 クリック イベント バブリング (ClickEvent Bubble) は、要素が
