事件流：指的是网页中元素接受事件的顺序，它是一个概念，而不是具体的实际的东西
事件冒泡：指的是内层元素的事件，会触发包含着此元素的外层元素的事件，触发的顺序是：由内而外的
例如：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 div{ 8 padding:20px; 9 border:1px solid gray;10 }11 .box1{12 position:relative;13 width:200px;14 margin:50px auto;15 background: red;16 }17 .box2{18 background: green;19 }20 .box3{21 background: blue;22 }23 </style>24 <script>25 window.onload=function(){26 var Obox1 = document.querySelector('.box1');27 var Obox2 = document.querySelector('.box2');28 var Obox3 = document.querySelector('.box3');29 var Obtn = document.querySelector('.source');30 31 Obox1.addEventListener('click',function(){32 alert(1);33 },false);34 Obox2.addEventListener('click',function(){35 alert(2);36 },false);37 Obox3.addEventListener('click',function(){38 alert(3);39 },false);40 Obtn.addEventListener('click',function(){41 alert('Hello,huanying2015!');42 },false);43 }44 </script>45 </head>46 <body>47 <div class="box1">48 <div class="box2">49 <div class="box3">50 <input class="source" type="button" value="触发源">51 </div>52 </div>53 </div>54 </body>55 </html>
以下代码中：Obtn的点击事件，会触发外层box1,box2,box3的点击事件，触发顺序：Obtn---->box3---->box2---->box1
(也可以这样理解：Obtn实际是包含在box1,box2,box3中的，点击了Obtn，实际上box1,box2,box3都点击到了，所以box1,box2,box3会触发点击事件)
那么，怎么阻止冒泡事件呢？
阻止冒泡事件：可以使用stopPropagation()函数来阻止；
想在哪里阻止，就把函数加在哪里，例如，点击Obtn，而Obtn外层不会产生冒泡，可以在Obtn的点击函数里加入stopPropagation() 函数；
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 div{ 8 padding:20px; 9 border:1px solid gray;10 }11 .box1{12 position:relative;13 width:200px;14 margin:50px auto;15 background: red;16 }17 .box2{18 background: green;19 }20 .box3{21 background: blue;22 }23 </style>24 <script>25 window.onload=function(){26 var Obox1 = document.querySelector('.box1');27 var Obox2 = document.querySelector('.box2');28 var Obox3 = document.querySelector('.box3');29 var Obtn = document.querySelector('.source');30 31 Obox1.addEventListener('click',function(){32 alert(1);33 },false);34 Obox2.addEventListener('click',function(){35 alert(2);36 },false);37 Obox3.addEventListener('click',function(){38 alert(3);39 },false);40 Obtn.addEventListener('click',function(event){41 alert('Hello,huanying2015!');42 event.stopPropagation(); 43 },false);44 }45 </script>46 </head>47 <body>48 <div class="box1">49 <div class="box2">50 <div class="box3">51 <input class="source" type="button" value="触发源">52 </div>53 </div>54 </div>55 </body>56 </html>
运行结果：
事件捕获：和事件冒泡类似，不过顺序相反，顺序是由外向内
事件捕获，只要把监听函数了的第三个参数，有false改为true，就可以了
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 div{ 8 padding:20px; 9 border:1px solid gray;10 }11 .box1{12 position:relative;13 width:200px;14 margin:50px auto;15 background: red;16 }17 .box2{18 background: green;19 }20 .box3{21 background: blue;22 }23 </style>24 <script>25 window.onload=function(){26 var Obox1 = document.querySelector('.box1');27 var Obox2 = document.querySelector('.box2');28 var Obox3 = document.querySelector('.box3');29 var Obtn = document.querySelector('.source');30 31 Obox1.addEventListener('click',function(){32 alert(1);33 },true);34 Obox2.addEventListener('click',function(){35 alert(2);36 },true);37 Obox3.addEventListener('click',function(){38 alert(3);39 },true);40 Obtn.addEventListener('click',function(){41 alert('Hello,huanying2015!');42 },true);43 }44 </script>45 </head>46 <body>47 <div class="box1">48 <div class="box2">49 <div class="box3">50 <input class="source" type="button" value="触发源">51 </div>52 </div>53 </div>54 </body>55 </html>
运行结果：
那怎么阻止事件捕获呢，类似的，加入一个stopImmediatePropagation() 或者stopPropagation()函数 就可以了
-----网上是这么介绍的，但是我加入了，没有效果，不能阻止，不知道为什么？？？？？？
因为没有起到阻止事件捕获的效果，所以代码就暂时不上了。。。。。。。。。。。。。。
事件冒泡与事件捕获的顺序可以如下归纳：
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。