Javascriptではユーザー相互作用の核心部分がイベント処理です.本論文はイベントモデルと処理機構の全体的な説明である.
イベントは何ですか
イベントは、ユーザがウェブページを操作する際に発生するインタラクティブな動作であり、例えば、click/move、イベントはユーザがトリガする動作の他に、ドキュメントローディング、ウィンドウローリング、サイズ調整などがあります.
イベントモデルは何ですか?
イベントモデルとは、ブラウザがどうやってイベントを処理するかをいう.ブラウザによって処理の仕組みが違っています.
一般的には、あるインターフェース要素に単一のイベントが発生し、イベントの処理対象はこのインターフェース要素である.
しかし、典型的な問題は、この界面要素に親子要素が存在すれば、親子要素も同じイベントを定義し、
この時、事件はどのように処理しますか?親子の要素の間でどのように伝えられますか?誰が先にこの事件を受け取って、また誰が先に処理しますか?
例を挙げます

-----------------------------------
| element1                        |
|   -------------------------     |
|   |element2               |     |
|   -------------------------     |
|                                 |
-----------------------------------

element 2はelement 1のサブ要素であり、両方ともonclickイベントを定義しています.
これは事件モデル(事件のシーケンス)が解決する問題です.
二つのモデル
ネットスケープとマイクロソフトの闘争の時代に戻って、二つの会社は違う道を選んだ.
ネットスケープはイベントキャプチャーモデル、つまりネットスケープがelement 1が最初にイベントを取得したと考えています.
マイクロソフトは、そのデスクトップシステムと同様のメッセージ構造を選択しました.
これらの2つのモデルは対照的に、IEはevent bubbbling.Mozila、Opera 7などの2つのタイプだけをサポートしています.より古いバージョンのOperaとiCabの両方はサポートされていません.
今は何かを実感したかもしれませんが、インターネットが最初で最悪の時代です.
イベントキャプチャ

                   | |
--------------- | |-----------------
| element1      | |                |
|   -----------    | |-----------     |
|   |element2   \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

上の矢印の方向を見ると、element 1のイベントプロセッサが最初にトリガされ、次にelement 2に伝達される.
事件が勃発する

                 / \
--------------| |-----------------
| element1   | |                |
|   ----------- | |-----------     |
|   |element2 | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

イベントトラッピングとは対照的に、element 2のイベントプロセッサが最初にトリガされる.
W 3 Cモデル
W 3 Cは、この違いを理知的に処理し、両者の間で中和する方法を採用しており、W 3 Cモデルは、どのイベントも、まずターゲット要素に出会うまで捕獲され、その後、上に戻ることを規定している.

                     | |  / \
-----------------| |--| |-----------------
| element1       | |  | |                |
|   ---------------| |--| |-----------     |
|   |element2    \ /   | |          |     |
|   --------------------------------     |
|        W3C event model                 |
------------------------------------------

WEB開発者は、addEventListener()方法により、どの段階でイベントプロセッサ(キャプチャフェーズまたは発泡フェーズ)を登録するかを選択することができる， Advanced models ， true， ，false 。

：

element1.addEventListener('click',doSomething2,true)
element2.addEventListener('click',doSomething,false)

element1 ， doSomething2， element2，doSomething ， ， ， (element1) ， ， 。

W3C DOM ， 。

element1.onclick = doSomething2;

javascript          
  
  
  
  

   
   
   
    
  
  
  
  
1、cancelBubble（HTML DOM Event     ） ：                  ，         true。

2、stopPropagation（HTML DOM Event     ）：            、              。      ，                  ，            。

3、 preventDefault（HTML DOM Event     ）                   。

  ：
    function stopBubble(e)  
    {  
        if (e && e.stopPropagation)  
            e.stopPropagation()  
        else 
            window.event.cancelBubble=true 
    }  

   stopBubble(e)                            
 
 142 142.