javascript基础从小白到高手系列一百四十九：scroll 事件

虽然scroll 事件发生在window 上，但实际上反映的是页面中相应元素的变化。在混杂模式下，
可以通过元素检测scrollLeft 和scrollTop 属性的变化。而在标准模式下，这些变化在除
早期版的Safari 之外的所有浏览器中都发生在元素上（早期版的Safari 在上跟踪滚动位
置）。下面的代码演示了如何处理这些差异：
window.addEventListener(“scroll”, (event) => {
if (document.compatMode == “CSS1Compat”) {
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 的事件目标是获得焦点的元素。