第 17 章 事 件

事件代表文档或浏览器窗口中某个有意义的时刻,JavaScript 与 HTML 的交互是通过事件实现的
页面行为（在 JavaScript 中定义）与页面展示（在 HTML 和 CSS 中定义）的 分离。

• 17.1 事件流
  事件流描述了页面接收事件的顺序
• 17.1.1 事件冒泡
  IE 事件流被称为事件冒泡，这是因为事件被定义为从最具体的元素（文档树中最深的节点）开始触 发，然后向上传播至没有那么具体的元素（文档）

   
   
   
    
   
   
   
  Click Me
   
   
   
  在点击页面中的
  元素后，click 事件会以如下顺序发生：
  (1) 
  
  (2) 
  (3) 
  (4) document

  所有现代浏览器都支持事件冒泡

• 17.1.2 事件捕获
  事件捕获的意思是最不具体的节 点应该最先收到事件，而最具体的节点应该最后收到事件。事件捕获实际上是为了在事件到达最终目标 前拦截事件。
  如果前面的例子使用事件捕获，则点击

  元素会以下列顺序触发 click 事件： (1) document (2)

  
  (3)body(4)div

  在事件捕获中，click 事件首先由 document 元素捕获，然后沿 DOM 树依次向下传播，直至到达 实际的目标元素
  通常建议使用事件冒泡。
  17.3 事件对象
  在 DOM 中发生事件时，所有相关信息都会被收集并存储在一个名为 event 的对象中。
   

  let btn = document.getElementById("myBtn"); 
  btn.onclick = function(event) { 
   console.log(event.type); // "click" 
  }; 
  btn.addEventListener("click", (event) => { 
   console.log(event.type); // "click" 
  }, false)

  所有事件对象都会包含下表列出的这些公共属性和方法。
  bubbles 布尔值 只读 表示事件是否冒泡
  addEventListener()方法来指定事件处理程序。与其他事件一样，事件处理程序会接 收到一个 event 对象。
   

  window.addEventListener("load", (event) => { 
   console.log("Loaded!"); 
  }); 

  scroll 事件
   

  window.addEventListener("scroll", (event) => { 
   if (document.compatMode == "CSS1Compat") { 
   console.log(document.documentElement.scrollTop); 
   } else { 
   console.log(document.body.scrollTop); 
   } 
  });

  以上事件处理程序会在页面滚动时输出垂直方向上滚动的距离
  屏幕坐标 鼠标事件不仅是在浏览器窗口中发生的，也是在整个屏幕上发生的。可以通过 event 对象的 screenX 和 screenY 属性获取鼠标光标在屏幕上的坐标。
   

  let div = document.getElementById("myDiv"); 
  div.addEventListener("click", (event) => { 
   console.log(`Screen coordinates: ${event.screenX}, ${event.screenY}`); 
  });