事件三要素

  • 事件源
  • 事件类型
  • 事件处理程序

DOM 事件流

事件流描述的是从页面中接收事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程就是 DOM 事件流

DOM 事件流分为 3 个阶段

  1. 捕获阶段
  2. 当前目标阶段
  3. 冒泡阶段

image.png

image.png

事件流验证

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>事件流验证</title>
  8.     <style>
  9.       div {
  10.         font-size: 30px;
  11.         font-weight: 700;
  12.         text-align: center;
  13.       }
  15.       .father {
  16.         width: 500px;
  17.         height: 500px;
  18.         background-color: yellowgreen;
  19.         margin: 0 auto;
  20.       }
  22.       .son {
  23.         width: 200px;
  24.         height: 200px;
  25.         background-color: skyblue;
  26.         margin: 0 auto;
  27.       }
  28.     </style>
  29.   </head>
  31.   <body>
  32.     <div class="father">
  33.       <div class="son">son</div>
  34.     </div>
  35.     <!--
  36.     <script>
  37.       // 捕获
  38.       const son = document.querySelector(".son");
  39.       son.addEventListener(
  40.         "click",
  41.         event => {
  42.           console.log("son"); // 后
  43.         },
  44.         false
  45.       );
  46.       const father = document.querySelector(".father");
  47.       father.addEventListener(
  48.         "click",
  49.         event => {
  50.           console.log("father"); // 先
  51.         },
  52.         false
  53.       );
  54.     </script>
  55.     -->
  56.     <script>
  57.       // 冒泡
  58.       const son = document.querySelector(".son");
  59.       son.addEventListener(
  60.         "click",
  61.         event => {
  62.           console.log("son"); // 先
  63.         },
  64.         false
  65.       );
  66.       const father = document.querySelector(".father");
  67.       father.addEventListener(
  68.         "click",
  69.         event => {
  70.           console.log("father"); // 后
  71.         },
  72.         false
  73.       );
  74.     </script>
  75.   </body>
  76. </html>
  • JS 代码中只能执行捕获或者冒泡其中的一个阶段
  • onclick和attachEvent只能得到冒泡阶段