関連する読み物：
javascriptイベント学習概要（v）JSのマウスイベントタイプ
//www.vevb.com/article/86259.htm
JavaScriptイベント学習概要（i）イベントフロー
//www.vevb.com/article/86261.htm
JavaScriptイベント学習概要（iv）イベントのパブリックメンバー（プロパティと方法）
//www.vevb.com/article/86262.htm
JavaScriptイベント学習概要（ii）JSイベントハンドラー
//www.vevb.com/article/86264.htm
JavaScriptイベント学習概要（iii）JSイベントオブジェクト
1。イベント
イベントは、クリック、ロード、マウスオーバーなど、ユーザーまたはブラウザ自体が実行する特定のアクションです。すべてのイベントの名前です。
イベントは、JavaScriptとDOMの間の橋です。
トリガーの場合は、イベントを実行し、その処理関数を呼び出して対応するJavaScriptコードを実行して応答を提供します。
典型的な例は次のとおりです。ページのロード後にロードイベントがトリガーされます。ユーザーは要素をクリックして、クリックイベントをトリガーします。
2。イベントフロー
1。イベントのインフルエンザの認識
質問：ページ要素をクリックしてください。このようなイベントを感じることができますか？
回答：要素をクリックしているときに、要素のコンテナ要素、またはページ全体をクリックします。
例：3つの同心円があり、対応するイベント処理機能を各円に追加し、対応するテキストがポップアップします。最も内側の円をクリックし、外側の円もクリックして、外側の円のクリックイベントもトリガーされます。
<！doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> </head> <style> #outer {position：absolute;幅：400px;高さ：400px;上：0;左：0;下：0;右：0;マージン：自動;バックグラウンドカラー：deeppink; } #middle {position：absolute;幅：300px;高さ：300px;トップ：50％;マージン左：-150px;マージントップ：-150px;バックグラウンドカラー：DeepskyBlue; } #inner {position：absolute;幅：100px;高さ：100px;トップ：50％;左：50％;マージン左：-50px;マージントップ：-50px;バックグラウンドカラー：darkgreen;テキストアライグ：センター;ラインハイト：100px;色：白; }＃outer、＃middle、＃inner {border-radius：100％; } </style> <body> <div id = "outer"> <div id = "middle"> <div id = "inner">クリックしてください！ </div> </div> </div> <scrip> var innercircle = document.getElementById（ "inner"）; innercircle.onclick = function（）{alert（ "innercircle"）; }; var middlecircle = document.getElementById（ "Middle"）; middlecircle.onclick = function（）{alert（ "middlecircle"）; } var outercircle = document.getElementById（ "outourth"）; outercircle.onclick = function（）{alert（ "outurecircle"）; } </script> </body> </html>効果は次のとおりです。
2。イベントフロー
イベントが発生すると、要素ノードとルートノードの間に特定の順序で伝播します。パスを通過するすべてのノードがイベントを受け取ります。この伝播プロセスは、DOMイベントストリームです。
イベント伝播の順序は、ブラウザの2つのイベントストリームモデル、キャプチャイベントストリームとバブルイベントストリームに対応しています。
バブルイベントストリーム：イベントの伝播は、最も具体的なイベントターゲットから最も具体的なイベントターゲットまでです。つまり、ドムツリーの葉から根までです。
キャプチャされたイベントストリーム：イベントの伝播は、最も特定のイベントターゲットから最も特定のイベントターゲットまでです。つまり、ドムツリーの根から葉までです。
<！doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </head> <body> <div id = "mydiv">クリックしてください！</div> </body> </html>
上記のHTMLコードで、ページの<div>要素をクリックします。
バブルイベントストリームでは、イベントの伝播順序をクリックします<div> - 》 <body> - <html> - 》ドキュメント
キャプチャされたイベントストリームでは、クリックイベントの伝播順序はドキュメントです - 》 <html> - 》 <body> - 》 <div>
注記：
1）すべての最新のブラウザはイベントバブルをサポートしますが、特定の実装にはわずかな違いがあります。
IE5.5以前では、イベントバブルは<html>要素をスキップします（ボディからドキュメントに直接ジャンプします）。
IE9、Firefox、Chrome、およびSafariバブルイベントは、ウィンドウオブジェクトまでずっとイベントになります。
2）IE9、Firefox、Chrome、Opera、およびSafariはすべてイベントキャプチャをサポートします。 DOM標準では、イベントをドキュメントオブジェクトから伝播する必要がありますが、これらのブラウザはウィンドウオブジェクトからイベントをキャプチャし始めます。
3）古いブラウザはそれをサポートしていないため、イベントキャプチャを使用する人はほとんどいません。イベントバブルを使用することをお勧めします。
DOMイベントストリーム
DOM標準では、Capture + Bubblingを使用します。両方のイベントストリームは、ドキュメントオブジェクトから始まり、ドキュメントオブジェクトで終了する、DOMのすべてのオブジェクトをトリガーします。
DOM標準では、イベントフローには、イベントキャプチャステージ、ターゲットステージ、イベントバブルステージの3つのステージが含まれることを規定しています。
イベントキャプチャフェーズ：実際のターゲット（<div>）は、キャプチャフェーズ中にイベントを受け取りません。つまり、キャプチャ段階では、イベントは<html>から<body>にドキュメントから停止します。上の写真では、1〜3です。
ターゲット段階で：イベントが発生し、<div>で処理されます。しかし、イベント処理は泡立ちフェーズの一部と見なされます。
バブルフェーズ：イベントはドキュメントに戻ります。
注記：
1）：DOM標準では、イベントキャプチャフェーズキャプチャにはイベントターゲットが含まれることを規定していますが、イベントオブジェクトのイベントはIE9、Safari、Chrome、Firefox、Opera9.5以降のバージョンで設定されます。その結果、ターゲットオブジェクトでイベントを操作する2つの機会があります。
2）：すべてのイベントがバブルステージを通過するわけではありません。すべてのイベントはキャプチャステージを通過し、ターゲットステージにありますが、一部のイベントはバブルステージをスキップします。たとえば、入力フォーカスを取得するフォーカスイベントと、入力フォーカスを失うぼかしイベントです。
ターゲットオブジェクトでイベントを操作する2つのチャンスの例：
<！doctype html> <html> <head lang = "en"> <meta charset = "utf-8"> <title> </title> </head> <style> #outer {position：absolute;幅：400px;高さ：400px;上：0;左：0;下：0;右：0;マージン：自動;バックグラウンドカラー：deeppink; } #middle {position：absolute;幅：300px;高さ：300px;トップ：50％;マージン左：-150px;マージントップ：-150px;バックグラウンドカラー：DeepskyBlue; } #inner {position：absolute;幅：100px;高さ：100px;トップ：50％;左：50％;マージン左：-50px;マージントップ：-50px;バックグラウンドカラー：darkgreen;テキストアライグ：センター;ラインハイト：100px;色：白; }＃outer、＃middle、＃inner {border-radius：100％; } </style> <body> <div id = "outer"> <div id = "middle"> <div id = "inner">クリックしてください！ </div> </div> </div> <scrip> var innercircle = document.getElementById（ "inner"）; Innercircle.addeventListener（ "click"、function（）{alert（ "innerycircleのクリックイベントがキャプチャステージで発射されます"）;}、true）; Innercircle.addeventListener（ "click"、function（）{alert（ "innerscircleのクリックイベントがバブルステージで発射されます"）;}、false）; var middlecircle = document.getElementById（ "Middle"）; middlecircle.addeventlistener（ "click"、function（）{alert（ "middlecircleのクリックイベントがキャプチャ段階で起動されます"）;}、true）; middlecircle.addeventlistener（ "click"、function（）{alert（ "middlecircleのクリックイベントがバブルステージで発射されます"）;}、false）; var outercircle = document.getElementById（ "outourth"）; outercircle.addeventListener（ "click"、function（）{alert（ "outourcircleのクリックイベントがキャプチャステージで発射されます"）;}、true）; outercircle.addeventlistener（ "click"、function（）{alert（ "outourcircleのクリックイベントがバブルステージで発射されます"）;}、false）; </script> </body> </html>操作効果は、6つのボックスが次々とポップアップすることです。原則を説明するために、私はそれを写真に統合しました：
3.イベントフローの典型的なアプリケーション - イベントプロキシ
従来のイベント処理では、イベントハンドラーを各要素に追加する必要があります。 JS Event Proxyはシンプルで効果的な手法であり、イベントプロセッサを親要素に追加できるため、イベントプロセッサを複数の子要素に追加することを避けることができます。
イベントプロキシの原理では、イベントバブルとターゲット要素を使用し、イベントプロセッサを親要素に追加し、子要素がイベントを泡立てるのを待ち、親要素はターゲットを介してどのチャイルド要素があるか（つまり、srcelement）を決定し、対応する処理を実行できます。ターゲットに関するその他のコンテンツについては、次の例については、イベント（IV）のパブリックメンバー（プロパティと方法）については、次の例を参照してください。
従来のイベント処理、各要素にイベントハンドラーを追加すると、コードは次のとおりです。
<body> <ul id = "color-list"> <li> red </li> <li> orange </li> <li> yellow </li> <li> green </li> <li> blue </li> <li> purple </li> </ul> <script>（var colorList = document.getElementbyid "; var colorSylementsbytagname（ "li"）; alert（targetelement.innerhtml）; </script> </body>
イベントエージェントの処理方法は次のとおりです。
<body> <ul id = "color-list"> <li> red </li> <li> orange </li> <li> yellow </li> <li> green </li> <li> blue </li> <li> indigo </li> <li>紫</li> </ul> <スクリプト>（var colorList = document.getelementbyid "）; colorlist.addeventlistener（ 'click'、false） }}）（）; </script> </body>
イベントプロキシの利点を要約するには：
a。イベントプロセッサはメモリに存在する必要があり、パフォーマンスが向上するため、複数のイベントプロセッサを1に減らします。各セルのバインディングイベントハンドラーの従来の方法をイベントプロキシ（つまり、イベントハンドラーをテーブルに追加する）を比較して、100列のテーブルがある場合、イベントプロキシは潜在的なリスクを回避し、パフォーマンスを改善すると結論付けることは難しくありません。
b。イベントプロキシは異なる子要素に対して異なる処理方法を採用できるため、DOMアップデートではイベントプロセッサの再配置は必要ありません。他の子要素（a、span、divなど）が追加されている場合、イベントエージェントのイベントハンドラー関数を直接変更できます。プロセッサを再構築する必要はなく、再びループする必要もありません。
上記は、編集者が紹介したイベントストリーミングに関するJavaScriptイベント学習の概要（i）です。私はそれが誰にでも役立つことを願っています！