事件捕獲與事件冒泡

事件傳播模型：事件捕獲和事件冒泡兩個過程

即事件先到達根元素，再從根元素一層一層向下傳播到目標元素，然後再一層一層向上傳到根元素。

one

twothree
four
var one=document.getelementbyid('one');
var two=document.getelementbyid('two');
var three=document.getelementbyid('three');
var four=document.getelementbyid('four');
one.addeventlistener('click',function(),true);
two.addeventlistener('click',function(),true);
three.addeventlistener('click',function(),true);
four.addeventlistener('click',function(),true

單擊one：目標元素是one，輸出one

單擊two：目標元素是two，接收事件的順序是one->two->one，因為只在捕獲階段處理事件，因此輸出的是one two

單擊three：目標元素是three，接收事件的順序是one->two->three->two->one，因為只在捕獲階段處理事件，因此輸出 one two three

單擊four：目標元素是four，接收事件的順序是one->two->three->four->three->two->one，因為只在捕獲階段處理事件，因此輸出的是one two three four

one.addeventlistener('click',function(),false);

two.addeventlistener('click',function(),false);
three.addeventlistener('click',function(),false);
four.addeventlistener('click',function(),false);

單擊two：輸出two one

單擊three：輸出three two one

單擊four：輸出four three two one

one.addeventlistener('click',function(),true);

two.addeventlistener('click',function(),false);
three.addeventlistener('click',function(),false);
four.addeventlistener('click',function(),true);

one.addeventlistener('click',function(),true);

two.addeventlistener('click',function(),false);
two.addeventlistener('click',function(),true);
three.addeventlistener('click',function(),false);
four.addeventlistener('click',function(),true);

這個分兩種情況討論：

（1）若目標元素是two，目標事件處理程式按新增事件的順序執行，其他元素的按先捕獲後冒泡

則輸出：one capture--two bubble--two capture

（2）若目標元素不是two，假設單擊four

則輸出是：one capture--two capture--four capture--three bubble--two bubble



事件冒泡與事件捕獲

dom事件標準定義了兩種事件流，這兩種事件流有著顯著的不同並且可能對你的應用有著相當大的影響。這兩種事件流分別是捕獲和冒泡。和許多web技術一樣，在它們成為標準之前，netscape和微軟各自不同地實現了它們。netscape選擇實現了捕獲事件流，微軟則實現了冒泡事件流。幸運的是，w3c決定組合使用...

事件冒泡與事件捕獲

兩種模型 以前，netscape和microsoft是不同的實現方式。netscape中，div先觸發，這就叫做事件捕獲。microsoft中，p先觸發，這就叫做事件冒泡。兩種事件處理順序剛好相反。ie只支援事件冒泡，mozilla,opera 7 和 konqueror兩種都支援，舊版本的oper...

事件流（事件冒泡與事件捕獲）

dom結構是乙個樹形結構，當乙個html元素發生乙個事件時，該事件會在元素節點與根節點之間的路徑傳播，路徑所經過的節點都會收到該事件，這個傳播過程就是dom事件流。分為事件冒泡模型和事件捕獲模型和dom標準事件模型 是由ie開發團隊提出來的，從dom樹形結構上理解就是事件由葉子節點沿祖先節點一直向上...