JSjs进阶--之JS三大家族：offset家族 Scroll家族 client家族

var aaa = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

var aaa = document.documentElement.scrollTop + document.body.scrollTop;

1.1   事件对象的获取（event的获取）

IE678中，window.event

在火狐谷歌中，event或者，在事件绑定的函数中，加参，这个参数就是event.

  Box.onclick = function (aaa){   aaa就是event     }

1.2   兼容获取方式有两种：

不写参数直接使用event;

写参数，但是为event....var  event  = event || window.event;(主要用这种)

1.3   event内容重要内容

PageY/pageX: 鼠标位于整个网页页面的顶部和左侧部分的距离。（页面）

ScreenY/screenX: 鼠标位于屏幕的上方和左侧的距离。（屏幕）

ClientX/clientY: 鼠标位于浏览器的左侧和顶部的距离。（浏览器大小和位置）

1.1   PageY和pageX的兼容写法（很重要）

在页面位置就等于 = 看得见的+看不见的

pageY/pageX=event.clientY/clientX+scroll().top/scroll().left

client家族

1.1  主要成员

1、clientWidth   获取网页可视区域宽度（两种用法）

   clientHeight  获取网页可视区域高度（两种用法）

     调用者不同，意义不同：

                   盒子调用：             指盒子本身。

                   body/html调用：      可视区域大小。 

2、clientX       鼠标距离可视区域左侧距离（event调用）

   clientY      鼠标距离可视区域上侧距离（event调用）

3、clientTop/clientLeft           盒子的border宽高

1.2  三大家族区别（三大家族总结）

1.2.1  Width和height

clientWidth  = width + padding

clientHeight  = height + padding

offsetWidth  = width + padding + border

offsetHeight  = height + padding + border

scrollWidth   = 内容宽度（不包含border）width + padding

scrollHeight  = 内容高度（不包含border）

1.2.2  top和left

offsetTop/offsetLeft：

         调用者：任意元素。(盒子为主)

         嘛作用：距离父系盒子中带有定位的距离。

scrollTop/scrollLeft:(盒子也可以调用，必须有滚动条)

         调用者：document.body.scrollTop/.....(window)

         嘛作用：浏览器无法显示的部分（被卷去的部分）。

clientY/clientX:（clientTop/clientLeft 值的是border）

         调用者：event.clientX(event)

         嘛作用：鼠标距离浏览器可视区域的距离（左、上）。

//    width和height
//    offset带border
//    scroll不带border，内容的宽高
//    client不带border

//    top和left
//    offset距离父系盒子带有定位的盒子之间的距离
//    scroll被卷去的部分的距离
//    clientborder的宽高

    //clientX和clientY
//    event调用，鼠标距离浏览器的可视区域的距离

1.3  client家族特殊用法之:检浏览器宽/高度(可视区域)

1.4  Onresize事件

只要浏览器的大小改变，哪怕1像素，都会触动这个事件。

1.5  案例：根据浏览器可视区域大小，给定背景色

1.6  事件总结

区分：

    1.window.onscroll          屏幕滑动

    2.window.onresize           浏览器大小变化

    3.window.onload          页面加载完毕

    4.div.onmousemove         鼠标在盒子上移动

         （注意：不是盒子移动！！！）

  5.onmouseup/onmousedown  == onclick

1.7  获得屏幕宽高

window.screen.width

分辨率是屏幕图像的精密度，指显示器所能显示的像素有多少。

     我们的电脑一般：

横向1280个像素点，

纵向960个像素点。

我们看电影的时候是满屏和半屏的，就是这。