JS-特效～ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle（ele，attr）；、缓动动画封装

知识点：

　　模拟滚动条的解除事件问题；

　　event内置对象，包含了大量事件；

　　page兼容性：

　　　　pageX || clientX + scool（）.top ；

　　if (true === a）true 最好写前边；

　　window.screen.width/height ：检测屏幕分辨率；

　　屏幕宽高：

　　　　window.screen.width。 window.screen.height ；

　　可视区域宽高兼容性写法：

        function  client(){
　　　　　　　if (window.innerHeight !== undefined) {
　　　　　　　　　return{
　　　　　　　　　　　　'width':window.innerWidth,
　　　　　　　　　　　　'height':window.innerHeight
　　　　　　　　　}　　　　　　
　　　　　　　　else if(window.compatMode ==="CSS1Compt"){
　　　　　　　　　return{
　　　　　　　　　　　　'width':document.documentElement.clientWidth,
　　　　　　　　　　　　'height':document.documentElementclientHeight 
　　　　　　　　　}
　　　　　　　　else {
　　　　　　　　　　return{
　　　　　　　　　　　　'width':window.body.clientWidth,
　　　　　　　　　　　　'height':window.body.clientHeight
　　　　　　　　　　 }

　　　　　　　　}　　　　
　　　　　}

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<script src="jquery1.0.0.1.js"></script>

    <script>

        //需求：浏览器每次更改大小，判断是否符合某一标准然后给背景上色。

        //  // >960红色，大于640小于960蓝色，小于640绿色。

        //步骤：

        //1.老三步

        //2.判断。

        //3.上色

        //1.老三步

        window.onresize = fn;

        //页面加载的时候直接执行一次函数，确定浏览器可视区域的宽，给背景上色

        fn();

        //封装成函数，然后指定的时候去调用和绑定函数名

        function fn() {

            //2.判断。

            //3.上色

            if(client().width>960){

                document.body.style.backgroundColor = "red";

            }else if(client().width>640){

                document.body.style.backgroundColor = "blue";

            }else{

                document.body.style.backgroundColor = "green";

            }

        }

     //获取屏幕可视区域的宽高

    function client(){

        if(window.innerHeight !== undefined){

            return {

                "width": window.innerWidth,

                "height": window.innerHeight

            }

        }else if(document.compatMode === "CSS1Compat"){

            return {

                "width": document.documentElement.clientWidth,

                "height": document.documentElement.clientHeight

            }

        }else{

            return {

                "width": document.body.clientWidth,

                "height": document.body.clientHeight

            }

        }

    }

    </script>

</body>

</html>

根据屏幕可视宽度上色

client对象：

　　clientWidth / Height:网页可视区域的宽高：

　　　　不包括margin和border

　　　　padding+widhth

　　　　clientTop ／Left：获取border-top／left的宽度

　　盒子调用指盒子本身

　　body／html调用，可视区域大小

　　浏览器大小变化事件，window.onresize

三大家族的区别：

　　width/height

　　　　clientWidth = Width+padding

　　　　offsetWidth = width +padding +border

　　　　scrollWidth 内容高度（不含border）

　　Top／Left

　　　　offsetTop／Left ：距离父系盒子中带有定位的距离

　　　　scrollTop／Left ：浏览器被卷去的部分

　　　　clientTop／Left。：盒子的上／左 border宽度

　　X/Y

　　　　scrollX／Y

　　　　clientX／Y

　　　　　　鼠标距离可视区域的距离

冒泡：

　　　　当上一个元素上的事件被触发后，同样的事件在所有的父系元素上都被触发；

　　　　捕获冒泡目标阶段：

　　　　　　捕获：从上往下顺序（DOM树结构）执行事件；

　　　　　　冒泡：从下往上（DOm树结构）顺序执行事件；

　　　　不会冒泡的事件：blur\focus\load\unload\onmoissenter\onmouseleave ;

　　　　event.bubbles事件是否冒泡；

　　　　取消冒泡：
　　　　　　IE9+／火狐／谷歌：event.stopPropagetion ;

　　　　　　IE678 :cancel.bubbles

　　　　 　if (event && event.stopPropagetion){

　　　　　　　　event.stopPropagetion();

　　　　　　}else {

　　　　　　　　event.cancelBubble

　　　　　　　}

事件委托：

　　　　普通的事件绑定无法为新创建的元素绑定时间

捕获addEventListener

function fn (阐述1，参数2，参数3）{

　　if (参数3） {

　　　　fn(参数1，参数3）；

　　}

获取内嵌式和外链式的属性：

function getStyle(ele,attr) {

    if (window.getComputedStyle){

        return window.getComputedStyle( ele,null )[ attracted ];

    }

    return ele.currentStyle[attr];

}

缓动动画封装：

        function animate(ele,json,fn){

            //先清定时器

            clearInterval(ele.timer);

            ele.timer = setInterval(function () {

                //开闭原则

                var bool = true;

                //遍历属性和值，分别单独处理json

                //attr == k(键)    target == json[k](值)

                for(var k in json){

                    //四部

                    var leader = parseInt(getStyle(ele,k)) || 0;

                    //1.获取步长

                    var step = (json[k] - leader)/10;

                    //2.二次加工步长

                    step = step>0?Math.ceil(step):Math.floor(step);

                    leader = leader + step;

                    //3.赋值

                    ele.style[k] = leader + "px";

                    //4.清除定时器

                    //判断: 目标值和当前值的差大于步长，就不能跳出循环

                    //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。

                    if(json[k] !== leader){

                        bool = false;

                    }

                }

                console.log(1);

                //只有所有的属性都到了指定位置，bool值才不会变成false；

                if(bool){

                    clearInterval(ele.timer);

                    //所有程序执行完毕了，现在可以执行回调函数了

                    //只有传递了回调函数，才能执行

                    if(fn){

                        fn();

                    }

                }

            },25);

        }

        //兼容方法获取元素样式

        function getStyle(ele,attr){

            if(window.getComputedStyle){

                return window.getComputedStyle(ele,null)[attr];

            }

            return ele.currentStyle[attr];

        }