javascript基础学习系列二百七十二： resize 事件和scroll 事件

当浏览器窗口被缩放到新高度或宽度时，会触发 resize 事件。这个事件在 window 上触发，因此 可以通过 JavaScript 在 window 上或者为元素添加 onresize 属性来指定事件处理程序。优先使 用 JavaScript 方式:

   window.addEventListener("resize", (event) => {
      console.log("Resized");
});

类似于其他在 window 上发生的事件，此时会生成 event 对象，且这个对象的 target 属性在 DOM 22 合规的浏览器中是 document。而 IE8 及更早版本中并没有提供可用的属性。
不同浏览器在决定何时触发 resize 事件上存在重要差异。IE、Safari、Chrome 和 Opera 会在窗口 缩放超过1像素时触发resize事件，然后随着用户缩放浏览器窗口不断触发。Firefox早期版本则只在 23 用户停止缩放浏览器窗口时触发 resize 事件。无论如何，都应该避免在这个事件处理程序中执行过多 计算。否则可能由于执行过于频繁而导致浏览器响应明确变慢。

window.addEventListener("scroll", (event) => {
if (document.compatMode == "CSS1Compat") { 27

注意 浏览器窗口在最大化和最小化时也会触发resize事件。

4. scroll 事件

虽然 scroll 事件发生在 window 上，但实际上反映的是页面中相应元素的变化。在混杂模式下， 可以通过元素检测 scrollLeft 和 scrollTop 属性的变化。而在标准模式下，这些变化在除 早期版的 Safari 之外的所有浏览器中都发生在元素上(早期版的 Safari 在上跟踪滚动位 置)。下面的代码演示了如何处理这些差异:

   console.log(document.documentElement.scrollTop);
} else {
  console.log(document.body.scrollTop);
}
 });

事 件

以上事件处理程序会在页面滚动时输出垂直方向上滚动的距离，而且适用于不同渲染模式。因为 Safari 3.1 之前不支持 document.compatMode，所以早期版本会走第二个分支。
类似于 resize，scroll 事件也会随着文档滚动而重复触发，因此最好保持事件处理程序的代码 尽可能简单。

焦点事件

焦点事件在页面元素获得或失去焦点时触发。这些事件可以与 document.hasFocus()和 document.activeElement 一起为开发者提供用户在页面中导航的信息。焦点事件有以下 6 种。
 blur:当元素失去焦点时触发。这个事件不冒泡，所有浏览器都支持。
 DOMFocusIn:当元素获得焦点时触发。这个事件是 focus 的冒泡版。Opera 是唯一支持这个事
件的主流浏览器。DOM3 Events 废弃了 DOMFocusIn，推荐 focusin。
 DOMFocusOut:当元素失去焦点时触发。这个事件是 blur 的通用版。Opera 是唯一支持这个事
件的主流浏览器。DOM3 Events 废弃了 DOMFocusOut，推荐 focusout。
 focus:当元素获得焦点时触发。这个事件不冒泡，所有浏览器都支持。
 focusin:当元素获得焦点时触发。这个事件是 focus 的冒泡版。
 focusout:当元素失去焦点时触发。这个事件是 blur 的通用版。 焦点事件中的两个主要事件是 focus 和 blur，这两个事件在 JavaScript 早期就得到了浏览器支持。
它们最大的问题是不冒泡。这导致 IE 后来又增加了 focusin 和 focusout，Opera 又增加了 DOMFocusIn 和 DOMFocusOut。IE 新增的这两个事件已经被 DOM3 Events 标准化。
当焦点从页面中的一个元素移到另一个元素上时，会依次发生如下事件。 (1) focuscout 在失去焦点的元素上触发。
(2) focusin 在获得焦点的元素上触发。
(3) blur 在失去焦点的元素上触发。
(4) DOMFocusOut 在失去焦点的元素上触发。
(5) focus 在获得焦点的元素上触发。
(6) DOMFocusIn 在获得焦点的元素上触发。 其中，blur、DOMFocusOut和focusout的事件目标是失去焦点的元素，而focus、DOMFocusIn
和 focusin 的事件目标是获得焦点的元素。