冒泡事件 捕獲事件 阻止事件

father

son

直接上圖

冒泡事件**:

div2代表子盒子

當子盒子被點選時會先處理自己，搞完自己就產生了冒泡==>就是向上查詢直到document結束

為什麼不是html而是document? 不是都在html在顯示？

w3c裡面找到下面解釋:

ok,回到正題,也就是點選div2會同時觸發自己，和父元素以及上面的body--->html--->document

問題來了？怎麼解決，我就只想div2（子元素）做自己

解決方法:

阻止冒泡事件**：

div2.addeventlistener('click', function(e) );

事件處理模型: 從捕獲到冒泡

乙個物件的乙個事件型別只能遵循一種事件模型

觸發順序：先捕獲，後冒泡

左邊是捕獲順序，右邊是冒泡順序

捕獲true  ==>

div1.addeventlistener('click',function(),true);    //捕獲先執行

div2.addeventlistener('click',function(),false); 　   //事件源跟false和true無關，正常順序執行

div1.addeventlistener('click',function(),false);    //冒泡從下到上==>div2最底層完了，這一行就執行

結果：1  2 3

擴充套件2:

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

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

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

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

分析：先捕獲找true   div2和div1 由於div2是事件源頭不用考慮true/false 所以輸出3

捕獲完了，看false 冒泡  從底層(事件源)向上冒泡   輸出 2  4  1

事件冒泡,事件捕獲

js事件流中有一種事件被稱為 冒泡事件 當乙個元素被觸發乙個事件時，該目標元素上的事件會優先被執行，然後向外傳播到每個祖先元素，恰如水裡的乙個泡泡似的，從產生就一直往上冒，到達水平面時，它才消失。在這個過程中，如果你只希望觸發目標元素上的事件，而不想它傳播到祖先元素上去，那麼你需要在 泡泡 離開物件...

事件捕獲 事件冒泡

body div id div1 div id div2 div id div3 div div div body script window.onload function odiv1.onclick fn1 odiv2.onclick fn1 odiv3.onclick fn1 false 冒泡...

阻止事件冒泡或捕獲階段

預設情況下，多個事件處理函式會按照dom事件流模型中的順序執行。如果子元素上發生某個事件，不需要執行父元素上註冊的事件處理函式，那麼我們可以停止捕獲和冒泡，避免沒有意義的函式呼叫。前面提到的5種事件繫結方式，都可以實現阻止事件的傳播。由於第5種方式，是最推薦的做法。所以我們基於第5種方式，看看如何阻...