DOM イベントステージとイベントキャプチャおよびイベントバブリング実行シーケンス (詳細なグラフィックとテキストの説明)

DOM イベントステージとイベントキャプチャおよびイベントバブリング実行シーケンス (詳細なグラフィックとテキストの説明)_jquery

WBOY

リリース： 2016-05-16 15:44:25

オリジナル

1857 人が閲覧しました

よく言われるように、優れた記憶力は悪いペンほど優れていません。多くの技術的な記事を完全に理解していないと、すぐに技術的な内容を忘れてしまいます。エディターは通常閲覧しており、私があなたと共有するためにまとめたメモです。

開発プロセス中、私たちは皆、他の人の成熟したフレームワークを使用することを望んでいます。なぜなら、巨人の肩に乗ることで開発の効率が大幅に向上するからです。しかし、私たちはその基本原則も理解する必要がありますし、理解する必要があります。たとえば、DOM イベントの場合、jquery フレームワークは、さまざまなブラウザーのさまざまな動作をカプセル化して抽象化するのに役立ち、イベント処理に大きな利便性をもたらします。しかし、ブラウザは徐々に統一化・標準化が進み、公式に標準化されたインターフェースをより安全に利用できるようになりました。なぜなら、多くの開発者の心を掴むことによってのみ、ブラウザーはさらに前進できるからです。下位バージョンのブラウザを使用して特定のページを開くのと同じように、そのページにアクセスするには Chrome などの高度なブラウザを使用するように指示されます。しかし、これは革命的なプロセスであり、私たちのウェブページをより多くの人に提供するためには、これらの歴史的問題とよりよく適合する必要があります。互換性を保つには、フレームワークに依存するだけでなく、その基本原則を理解する必要があります。

DOM イベントの 3 つのステージ

DOM イベントがトリガーされると、オブジェクト自体で 1 回トリガーされるだけではなく、次の 3 つの異なる段階を経ます。

1. キャプチャフェーズ : まず、ドキュメントのルートノードドキュメントからイベントトリガーオブジェクトに移動し、イベントオブジェクトを外側からキャプチャします。

2. ターゲットステージ : ターゲットイベントの場所 (インシデントが発生した場所) に到着し、イベントをトリガーします。

3. バブルステージ

: 次に、ターゲットイベントの場所からドキュメントのルートノードまでトレースバックし、イベントオブジェクトを内側から外側にバブルします。

引用元:

http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

イベントキャプチャとイベントバブリングの順序は明らかです。

実験部分

オンラインエディタを開きます:

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>

ログイン後にコピー

内側をクリックすると、結果は次のようになります: