事件冒泡:事件促發的最深層元素首先接收事件。然後是它的父元素,依序向上,直到document物件最終接收到事件。儘管相對於html元素來說,document沒有獨立的視覺表現,他仍然是html元素的父元素並且事件能冒泡到document元素。
隨便也說一下事件捕捉。
事件擷取:事件首先發生在DOM樹的最高層物件(document)然後往最深層的元素傳播。 (注意IE6只有冒泡,沒有捕獲)
事件委託:我認為事件委託是利用冒泡原理,把事件的監聽轉換到其父元素上,也就是把事件綁定到父元素上,然後在事件中取得子元素對象,對其進行相應的操作。優點:1.提高效能2.減少程式碼量
事件預設是在冒泡階段執行
先看下面程式碼:
我依序點選id1、id2、id3,執行效果如下圖:
解析:因為點選id3時候,先從id3開始冒泡,執行id3上綁定的事件,在冒泡到id2,執行id2,上面的事件,最後執行id1上面的事件。
現在開始阻止id2的冒泡,修改JS如下
window.onload=function(){ var oId1=document.getElementById('id1'); var oId2=document.getElementById('id2'); var oId3=document.getElementById('id3'); oId1.addEventListener('click',function(e){ console.log("点击了id1"); }); oId2.addEventListener('click',function(e){ console.log("点击了id2"); e.stopPropagation(); }); oId3.addEventListener('click',function(e){ console.log("点击了id3"); }); }
此時,我依序點擊id1、id2、id3,執行效果如下圖:
因為事件執行到id2,不在冒泡,故點擊id2,id3的時候,不會執行id1綁定的事件。
為了驗證事件在擷取階段執行,我將JS程式碼改為如下:
此時,我依序點擊id1、id2、id3 ,執行效果如下圖:
解析:每次點擊,事件都會從根元素開始執行,即捕獲到,如果有事件,就執行。
此時,我將JS程式碼改為如下:
此時,我依序點擊id1、id2、id3,執行效果如下圖:
從中發現了,一個現象,我點擊id3的時候,發現執行了id1和id2上面綁定的事件,為什麼不執行id3上面的事件呢?原來是因為取消冒泡e.stopPropagation();,也阻止了事件的捕獲。
現在我將JS修改為如下:
此時,我依序點擊id1、id2、id3,執行效果如下圖:
下面程式碼,當我在box綁定click事件的時候,透過e.srcElement,可以取得點擊的是哪個元素。
可以看出,我們可以在box綁定click事件裡面取得點擊的元素。
驗證事件委託中冒泡
將上面的JS改為如下:
此時點擊,會發現,id2,id3的時候,沒辦法透過e.srcElement取得到。因為我阻止了id2的冒泡。
以上就是Javascript中事件擷取、事件冒泡以及事件委託機制的內容,更多相關內容請關注PHP中文網(m.sbmmt.com)!