JS中的offset家族 scroll家族 client家族 事件对象event

js中有一套方便的获取元素尺寸的办法就是offset家族:
offsetWidth offsetHeight offsetLeft offsetTop offsetParent共同组成了offset家族

offsetWidth = width + padding + border
offsetHeight = height + padding + border

offsetLeft 和 offsetTop:
返回距离上级带有定位的盒子左边的位置，如果父级元素没有定位，则以body为准
offsetLeft从父亲的padding开始算，父亲的border不算

offsetParent:返回该对象的带有定位的父级，如果当前元素的父级元素没有
进行CSS定位，则offsetParent为body.如果当前元素的父级元素中有定位，则
取最近的父级元素

offsetLeft和style.left的区别
一、最大区别在于offsetLeft可以返回没有定位的盒子距离左侧的位置
而style.left不可以。
二、offsetTop返回的是数字，而style.top返回的是字符串(24px),除了数字外，还
带有单位。
三、offsetTop只读，而style.top读写
四、如果没有给HTML元素设置top样式，style.top返回的是空字符串。

scroll家族主要包括scrollWidth、scrollHeight scrollLeft scrollTop onscroll事件
scrollWidth/scrollHeight是指内容的高度
scrollLeft/scrollTop指被卷去的左侧和头部(浏览器无法显示的部分)
一般调用document.body.scrollTop
on scroll滚动事件(window.onscroll = func)
屏幕每滚动一次，哪怕只有一个像素也会触发这个事件。这样就可以检测屏幕滚动了
只能有一个写了多个以最后一个为准，同理 window.onload

未声明 DTD（谷歌只认识他）（IE9+认识他）document.body.scrollTop
已经声明DTD（IE678只认识他）(IE9+任何时候)
   document.documentElement.scrollTop
火狐/谷歌/ie9+以上支持的(不管DTD)
   window.pageYOffset

滚动到指定位置:window.scrollTo 把内容滚动到指定的坐标
scrollTo(xpos,ypos)
xpos    必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
ypos    必需。要在窗口文档显示区左上角显示的文档的 y 坐标

  clientWidth:获取网页可视区域宽度
  clientHeight:获取网页可视区域的高度
  如果是盒子调用，指的是盒子本身
如果是body/html调用，指的是可视区域的大小
clientX:鼠标距离可视区域左侧距离(event调用)
clientY:鼠标距离可视区域上侧距离(event调用)
clientTop/clientLeft盒子的border宽高

client家族之:检浏览器宽/高度(可视区域)
ie9及其以上的版本
window.innerWidth/Height  
标准模式（有DTD）（“CSS1Compat”）
document.documentElement.clientWidth
document.documentElement.clientHeight
怪异模式 （没有DTD）
document.body.clientWidth
document.body.clientHeight

三个家族的区别:
区别1：（offset/scroll/client宽高）

clientWidth  = width  + padding
clientHeight = height + padding
offsetWidth  = width  + padding + border
offsetHeight = height + padding + border
scrollWidth   = 内容宽度（不包含border）
scrollHeight  = 内容高度（不包含border）
  区别2：（offset/scroll/client上下）
offsetTop/offsetLeft ：
        调用者：任意元素。(盒子为主)
        嘛作用：距离父系盒子中带有定位的距离。
scrollTop/scrollLeft:(盒子也可以调用，必须有滚动条)
        调用者：document.body.scrollTop/.....(window)
        嘛作用：浏览器无法显示的部分（被卷去的部分）。
clientY/clientX:（clientTop/clientLeft 值的是border）
        调用者：event.clientX(event)
        嘛作用：鼠标距离浏览器可视区域的距离（左、上）。

再触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象，但支持的方式不同。
比如鼠标操作时候，会添加鼠标位置的相关信息到事件对象中。（类似Date）
普通浏览器支持 event（传参）
ie 678 支持 window.event（无参）

Snip20170723_1.png

clientX/clientY  
当前窗口的左上角为基准点
pageX/pageY低版本浏览器（IE67）不支持
以当前文档的左上角为基准点   
screenX/screenY
当前屏幕的左上角为基准点