事件流

  • 三个过程:
    • 从window对象向下到触发元素的父级元素是捕获过程;
    • 然后触发相应事件
    • 从当前触发事件的节点的父节点开始向上冒泡，冒泡到顶层的window对象

事件流 - 图1

  1. capture phase 捕获过程
  2. target phase 触发过程
  3. bubble phase 冒泡过程

冒泡与捕获

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6.   </head>
  7.   <style media="screen">
  8.   #div1{
  9.     width: 300px;
  10.     height: 100px;
  11.     background: red;
  12.     color: #fff;
  13.     text-align: center;
  14.   }
  15.   </style>
  16.   <body>
  17.     <div id="div1" >
  18.       目标元素
  19.     </div>
  20.     <script type="text/javascript">
  21.       var ev =document.getElementById('div1');
  22.       window.addEventListener('click',function () {
  23.         console.log("window click");
  24.       },true);
  25.       document.addEventListener('click',function () {
  26.         console.log('document click');
  27.       },true);
  28.       document.documentElement.addEventListener('click',function () {
  29.         console.log('html click');
  30.       },true);
  31.       document.body.addEventListener("click",function () {
  32.         console.log('body click');
  33.       },true);
  34.       ev.addEventListener('click',function () {
  35.         console.log('ev click');
  36.       })
  37.     </script>
  38.   </body>
  39. </html>