事件冒泡 && 捕获

捕获阶段：从window对象传导到目标节点（上层传到底层）称为“捕获阶段”（capture phase），捕获阶段不会响应任何事件；
目标阶段：在目标节点上触发，称为“目标阶段”
冒泡阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层；

E提出的事件流叫做

事件冒泡

，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点，看一下以下示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body onclick="bodyClick()">
  9.     <div onclick="divClick()">
  10.         <button onclick="btn()">
  11.             <p onclick="p()">点击冒泡</p>
  12.         </button>
  13.     </div>
  14.     <script>
  16.        function p(){
  17.           console.log('p标签被点击')
  18.        }
  19.         function btn(){
  20.             console.log("button被点击")
  21.         }
  22.          function divClick(event){
  23.              console.log('div被点击');
  24.          }
  25.         function bodyClick(){
  26.             console.log('body被点击')
  27.         }
  29.     </script>
  31. </body>
  32. </html>

网景公司提出的事件流叫

事件捕获流

  1.  事件捕获流的思想是不太具体的DOM节点应该更早接收到事件，而最具体的节点应该最后接收到事件，针对上面同样的例子，点击按钮，那么此时click事件会按照这样传播：（下面我们就借用addEventListener的第三个参数来模拟事件捕获流）
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  9. <div>
  10.     <button>
  11.         <p>点击捕获</p>
  12.     </button>
  13. </div>
  14. <script>
  15.     var oP=document.querySelector('p');
  16.     var oB=document.querySelector('button');
  17.     var oD=document.querySelector('div');
  18.     var oBody=document.querySelector('body');
  20.     oP.addEventListener('click',function(){
  21.         console.log('p标签被点击')
  22.     },true);
  24.     oB.addEventListener('click',function(){
  25.         console.log("button被点击")
  26.     },true);
  28.     oD.addEventListener('click',  function(){
  29.         console.log('div被点击')
  30.     },true);
  32.     oBody.addEventListener('click',function(){
  33.         console.log('body被点击')
  34.     },true);
  36. </script>
  40. </body>
  41. </html>

DOM事件流：

‘DOM2级事件’规定的事件流包含3个阶段，事件捕获阶段、处于目标阶段、事件冒泡阶段。首先发生的事件捕获为截获事件提供机会，然后是实际的目标接收事件，最后一个阶段是事件冒泡阶段，可以在这个阶段对事件做出响应。

在DOM事件流中，事件的目标在捕获阶段不会接收到事件，这意味着在捕获阶段事件从document到
就停止了，下个阶段是处于目标阶段，于是事件在
上发生，并在事件处理中被看成冒泡阶段的一部分，然后，冒泡阶段发生，事件又传播回document。