js 事件冒泡和事件捕获
事件流：指的是网页中元素接受事件的顺序，它是一个概念，而不是具体的实际的东西
事件冒泡：指的是内层元素的事件，会触发包含着此元素的外层元素的事件，触发的顺序是：由内而外的
例如：
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()函数 就可以了
—–网上是这么介绍的，但是我加入了，没有效果，不能阻止，不知道为什么？？？？？？
因为没有起到阻止事件捕获的效果，所以代码就暂时不上了。。。。。。。。。。。。。。
版权声明：本文为huanying2015原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。