关于DOM2级事件的事件捕获和事件冒泡
DOM2級(jí)事件中addEventListener的執(zhí)行機(jī)制，多個(gè)addEventListener同時(shí)添加時(shí)的執(zhí)行先后規(guī)律：
W3C的DOM事件觸發(fā)分為三個(gè)階段：
①、事件捕獲階段，即由最頂層元素（一般是從window元素開始，有的瀏覽器是從document開始，至于其中的差別我稍后會(huì)更新）開始，逐次進(jìn)入dom內(nèi)部，最后到達(dá)目標(biāo)元素，依次執(zhí)行綁定在其上的事件
②、處于目標(biāo)階段，檢測(cè)機(jī)制到達(dá)目標(biāo)元素，按事件注冊(cè)順序執(zhí)行綁定在目標(biāo)元素上的事件。
③、事件冒泡階段，從目標(biāo)元素出發(fā)，向外層元素冒泡，最后到達(dá)頂層（window或document），依次執(zhí)行綁定再其上的事件。
在addEventListener中，利用第三個(gè)參數(shù)控制其是從哪個(gè)階段開始，“true”是從捕獲階段開始，而“false”則是跳過(guò)捕獲階段，從冒泡階段開始。?看一個(gè)簡(jiǎn)單的例子：
1 <script type="text/javascript"> 2 window.οnlοad=function(){ 3 var outer = document.getElementById("outer"); 4 var inner = document.getElementById('inner'); 5 6 outer.addEventListener("click", function(){ 7 alert("1"); 8 } 9 , true); 10 11 inner.addEventListener("click", function(){ 12 alert("2"); 13 } 14 , true); 15 16 outer.addEventListener("click", 17 function(){ 18 alert("3"); 19 } 20 ,false) 21 } 22 </script> 23 24 <body> 25 <div id="outer"> 26 <div id="inner"></div> 27 </div> 28 </body>在這個(gè)例子里，如果我們點(diǎn)擊內(nèi)層元素inner,那么處于捕獲階段的1最先彈出，接下來(lái)是目標(biāo)元素2彈出，最后是處于冒泡階段的3彈出，即：1，2，3.?即使在代碼里變換三個(gè)綁定事件的順序，只要點(diǎn)擊的是inner,這個(gè)執(zhí)行順序就不會(huì)變。
那么問(wèn)題來(lái)了，如果點(diǎn)擊的是外層outer的話呢？
要明白這個(gè)問(wèn)題，我們必須明確一點(diǎn)：目標(biāo)事件在哪一層，事件流就在哪一層回流，即使在outer事件下還有許多子孫節(jié)點(diǎn)，事件流都不會(huì)在outer之后往內(nèi)流，此時(shí)，inner上的事件不會(huì)被觸發(fā)，因此在這段代碼中，只會(huì)彈出1和3。
那么這兩個(gè)數(shù)字哪個(gè)先彈呢？由于此時(shí)事件處于第二階段，即“處于目標(biāo)階段”，彈出順序取決的也不再是捕獲或冒泡，而是誰(shuí)在代碼中先注冊(cè)，因此，在這段代碼中，彈出的是：1→3.
綜上所述，事件在DOM中的執(zhí)行順序?yàn)?#xff1a;外層捕獲事件→內(nèi)層捕獲事件→先注冊(cè)的目標(biāo)事件→后注冊(cè)的目標(biāo)事件→內(nèi)層冒泡事件→外層冒泡事件
讓我們?cè)倏磦€(gè)例子來(lái)加深這個(gè)概念:
1 <script type="text/javascript"> 2 window.οnlοad=function(){ 3 var outer = document.getElementById("outer"); 4 var inner = document.getElementById('inner'); 5 var oBox=document.getElementById('box'); 6 7 oBox.addEventListener("click",function(){ 8 alert('1'); 9 },true) 10 oBox.addEventListener("click",function(){ 11 alert('4'); 12 },false) 13 14 15 outer.addEventListener("click", function(){ 16 alert("2"); 17 }, true); 18 19 20 inner.addEventListener("click",function(){ 21 alert('3.2') 22 },false) 23 24 25 inner.addEventListener("click", function(){ 26 alert("3.1"); 27 }, true); 28 29 } 30 </script> 31 32 <body> 33 <div id="box"> 34 <div id="outer"> 35 <div id="inner"></div> 36 </div> 37 </div> 38 </body>?
在這段代碼里，box上的捕獲事件最先執(zhí)行，然后是outer上的捕獲事件，然后是inner上先注冊(cè)的事件，然后是inner上后注冊(cè)的事件，最后是box上的冒泡事件?彈出順序?yàn)?#xff1a;1→2→3.2→3.1→4
補(bǔ)充一點(diǎn)，在ie8-中，由于addEventLister不起作用，我們使用attachEvent方法來(lái)綁定事件，此時(shí)在第二階段，也就是處于目標(biāo)階段，如果目標(biāo)元素上綁定了兩個(gè)事件，那么其執(zhí)行順序和addEventLister相反：誰(shuí)后注冊(cè)誰(shuí)先執(zhí)行.
?
接下來(lái)我們將問(wèn)題再升級(jí)，如果dom0級(jí)事件和dom2級(jí)事件同時(shí)存在，那執(zhí)行順序會(huì)是怎樣呢？
看下面的事例代碼：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>dom2</title> 6 <style> 7 #box{ 8 width:500px; 9 height:500px; 10 background-color: red; 11 } 12 13 #outer{ 14 width:200px; 15 height:200px; 16 background-color: green; 17 } 18 #inner{ 19 width:100px; 20 height:100px; 21 background-color: yellow; 22 } 23 </style> 24 </head> 25 <body> 26 <div id="box"> 27 <div id="outer"> 28 <div id="inner"></div> 29 </div> 30 </div> 31 </body> 32 33 <script type="text/javascript"> 34 window.onload = function () { 35 36 var outer = document.getElementById("outer"); 37 var inner = document.getElementById('inner'); 38 var oBox = document.getElementById('box'); 39 40 oBox.addEventListener("click", function () { 41 alert('oBox-Dom2冒泡'); 42 }, false); 43 44 oBox.addEventListener("click", function () { 45 alert('oBox-Dom2捕獲'); 46 }, true); 47 48 outer.addEventListener("click", function () { 49 alert("outer-Dom2冒泡"); 50 }, false); 51 52 outer.addEventListener("click", function () { 53 alert("outer-Dom2捕獲"); 54 }, true); 55 56 outer.οnclick=function(){ 57 alert("outer-dom0 click! "); 58 } 59 60 inner.addEventListener("click", function () { 61 alert('inner-Dom2冒泡'); 62 }, false); 63 64 inner.addEventListener("click", function () { 65 alert("inner-Dom2捕獲"); 66 }, true); 67 } 68 </script>此案例中，我將outer的div在捕獲階段和冒泡階段都綁定了點(diǎn)擊事件，同時(shí)還在綁定了dom0級(jí)的點(diǎn)擊事件處理函數(shù)，這時(shí)如果我們點(diǎn)擊inner，我們會(huì)發(fā)現(xiàn)，事件的執(zhí)行順序是這樣的 ?oBox-Dom2捕獲-->?outer-Dom2捕獲 -->?inner-Dom2冒泡 --> ?inner-Dom2捕獲 -->?outer-Dom2冒泡 -->?outer-dom0 click! -->?oBox-Dom2冒泡 由此我們可以得出一個(gè)結(jié)論：當(dāng)綁定dom0級(jí)事件元素不是目標(biāo)元素時(shí)，那么綁定dom0級(jí)事件的處理是在冒泡階段處理并按事件注冊(cè)的先后順序執(zhí)行（W3C先注冊(cè)的先執(zhí)行) ,如果綁定dom0級(jí)事件的元素是目標(biāo)元素時(shí)，則不論是捕獲階段綁定的處理函數(shù)還是冒泡階段綁定的處理函數(shù)以及dom0級(jí)事件處理函數(shù)，他們的執(zhí)行順序都是按照注冊(cè)的順序執(zhí)行（W3C先注冊(cè)的先執(zhí)行) 。
?
轉(zhuǎn)載于:https://www.cnblogs.com/guangyan/p/6686013.html
總結(jié)
以上是生活随笔為你收集整理的关于DOM2级事件的事件捕获和事件冒泡的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： ActiveMQ (二) 常用配置简介
- 下一篇： 13、邮件