Web前端------JS三大家族总结

2018-05-22 本文已影响96人 Peak_One

JS三大家族

JS的三大家族主要是Offset、Scroll、Client，通过对三大家族不同属性的灵活使用，我们可以模拟出很多炫酷的JS动画，增强界面的视觉感染力！让静态页面活起来！

Client家族属性介绍

clientWidth 获取网页可视区域宽度（两种用法）
clientHeight 获取网页可视区域高度（两种用法）
调用者不同，意义不同：
盒子调用：指盒子本身。
body/html调用：可视区域大小。
clientX 鼠标距离可视区域左侧距离（event调用）
clientY 鼠标距离可视区域上侧距离（event调用）
clientTop/clientLeft 盒子的border宽高

三大家族区别

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

另外一个版本的三大家族区别

offset家族
offsetHeight: 元素高，height+border+padding
offsetWidth: 元素宽，width+border+padding
offsetTop: 上边距离带有定位的父盒子的距离（重要）
offsetLeft: 左边距离带有定位的父盒子的距离（重要）
offsetParent: 最近的带有定位的父盒子
scroll家族
scrollHeight: 内容高，不含border
scrollWidth: 内容宽，不含border
scrollTop: document.documentELement.scrollTop || document.body.scrollTop; （重要）window.pageXOffset;
浏览器页面被卷去的头部
元素调用.必须具有滚动条的盒子调用。盒子本身遮挡住的子盒子内容。
子盒子被遮挡住的头部
scrollLeft: document.documentELement.scrollLeft: || document.body.scrollLeft: ; （重要）window.pageYOffset;
浏览器页面被卷去的左侧
元素调用.必须具有滚动条的盒子调用。盒子本身遮挡住的子盒子内容。
子盒子被遮挡住的左侧
client家族
clientHeight: 元素高，height+padding;
window.innerHeight; document.body.clientHeight 可视区域的高
clientWidth: 元素宽，width+padding;
window.innerWidth; document.documentElementWidth; 可视区域的宽
clientTop: 元素的上border宽
clientLeft: 元素的左border宽
clientY 调用者：event.clientY(event)（重要）
作用：鼠标距离浏览器可视区域的距离，上
clientX 调用者：event.clientX(event)（重要）
作用：鼠标距离浏览器可视区域的距离，左

client家族特殊用法：检查浏览器宽高（可视区域）兼容性写法

 //获取屏幕可视区域的宽高
    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
            }
        }
    }

Onresize事件

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

window.onresize = function () {
        //document.title = client().width + "    "+ client().height;
    }

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

<!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";
            }
        }



    </script>
</body>
</html>

检测屏幕宽高

window.screen.width

分辨率是屏幕图像的精密度，指显示器所能显示的像素有多少。我们的电脑一般：横向1280个像素点，纵向960个像素点。示例：

 window.onresize = function () {
        document.title = window.screen.width + "    "+ window.screen.height;
    }

事件冒泡

事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。(BUG)（本来应该一人做事一人当，结果，我做错了事情，你去告诉我妈）
什么是冒泡：子元素事件被触动，父盒子的同样的事件也会被触动。取消冒泡就是取消这种机制。

阻止冒泡
W3C的方法：（火狐、谷歌、IE11）
event.stopPropagation()
IE10以下则是使用：event.cancelBubble = true
兼容性写法：

var event = event || window.event;
 if(event && event.stopPropagation){
            event.stopPropagation();
  }else{
            event.cancelBubble = true;
  }

事件捕获

事件捕获和事件冒泡的机制相反
事件捕获是先从顶级父控件开始响应方法，最终才调用触发事件的子控件的响应事件

addEventListenner(参数1，参数2，参数3)

调用者是：事件源。参数1：事件去掉on 参数2 ：调用的函数

参数3：可有可无。没有默认false.false情况下，支持冒泡。True支持捕获。

image.png

事件冒泡与事件捕获测试小demo

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box1 {
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        .box2 {
            width: 300px;
            height: 300px;
            background-color: yellow;
        }
        .box3 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }


    </style>
</head>
<body>

<div class="box1" id="box1">
    <div class="box2">
        <div class="box3"></div>
    </div>
</div>

<script>

    var box1 = document.getElementById("box1");
    var box2 = box1.children[0];
    var box3 = box2.children[0];

//    冒泡和捕获
//    box1.onclick = function () {
//        alert("我是box1");
//    }
//
//    box2.onclick = function () {
//        alert("我是box2");
//    }
//
//    box3.onclick = function () {
//        alert("我是box3");
//    }
//
//    document.onclick = function () {
//        alert("我是document");
//    }


//    box1.addEventListener("click", function () {
//        alert("我是box1");
//    },true);
//
//    box2.addEventListener("click", function () {
//        alert("我是box2");
//    },true);
//
//    box3.addEventListener("click", function () {
//        alert("我是box3");
//    },true);
//
//    document.addEventListener("click", function () {
//        alert("我是document");
//    },true);


</script>

</body>
</html>

案例：隐藏模态框

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body,html {
            height: 100%;
            padding: 0;
            margin: 0;
        }
        .mask {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            display: none;
            background: rgba(0, 0, 0, 0.6);
        }
        .login {
            width: 400px;
            height: 300px;
            cursor: pointer;
            background-color: #fff;
            margin: 200px auto;
        }
    </style>
</head>
<body>
    <div class="mask">
        <div class="login" id="login"></div>
    </div>
    <a href="#">注册</a>
    <a href="#">登陆</a>
    <script src="jquery1.0.0.1.js"></script>
    <script>
        //需求：点击登录按钮，显示模态框。点击出去login以外的所有盒子隐藏模态框。
        //步骤：
        //1.给登录绑定事件
        //2.给document绑定事件，因为可以冒泡，只要判断，点击的不是login，那么隐藏模态框


        //1.给登录绑定事件
        var mask = document.getElementsByClassName("mask")[0];
        var a = document.getElementsByTagName("a")[1];

        a.onclick = function (event) {
            //显示模态框
            show(mask);

            //阻止冒泡
            event = event || window.event;
            if(event && event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble = true;
            }

        }

        //2.给document绑定事件，因为可以冒泡，只要判断，点击的不是login，那么隐藏模态框
        document.onclick = function (event) {
            //获取点击按钮后传递过来的值。
            event = event || window.event;

            //兼容获取事件触动时，被传递过来的对象
//            var aaa = event.target || event.srcElement;
            var aaa = event.target?event.target:event.srcElement;

            console.log(event.target);

            //判断目标值的ID是否等于login，如果等于不隐藏盒子，否则隐藏盒子。
            if(aaa.id !== "login"){
                mask.style.display = "none";
            }
        }


    </script>

</body>
</html>

事件委托

事件委托是冒泡的一个应用，普通的事件绑定，没有办法为新创建的元素绑定响应的事件，所以就出现了事件委托，将事件绑定到父级元素，根据标签名称等因素，为子控件添加对应的事件响应。具体示例如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        li {
            height: 30px;
            line-height: 30px;
            margin: 3px 0;
            background-color: red;
            cursor: pointer;
        }
    </style>
</head>
<body>
<button>创建4个移民li</button>
<ul>
    <li>我是土著li</li>
    <a href="#">我是土著li</a>
    <li>我是土著li</li>
    <li>我是土著li</li>
    <a href="#">我是土著li</a>
    <li>我是土著li</li>
</ul>
<script>

    var liArr = document.getElementsByTagName("li");
    var ul = document.getElementsByTagName("ul")[0];
    var btn = document.getElementsByTagName("button")[0];

//    for(var i=0;i<liArr.length;i++){
//        liArr[i].onclick = function () {
//            alert("我是土著li");
//        }
//    }

    btn.onclick = function () {
        for(var i=1;i<=4;i++){
            var newLi = document.createElement("li");
            var newA = document.createElement("a");
            newLi.innerHTML = "我是移民li";
            newA.innerHTML = "我是移民a";
            newA.href = "#";
            ul.appendChild(newLi);
            ul.appendChild(newA);
        }
    }


    //普通的时间绑定，没有办法为新创建的元素绑定事件。所以我们要使用冒泡的特性，事件委托！
    //事件委托
    ul.onclick = function (event) {
        //获取事件触动的时候传递过来的值
        event = event || window.event;
        var aaa = event.target?event.target:event.srcElement;
        //判断标签名，如果是li标签弹窗
        if(aaa.tagName === "LI"){
            alert("我是li");
        }
    }



</script>

</body>
</html>

欢迎关注我的个人微信公众号，免费送计算机各种最新视频资源！你想象不到的精彩！

0.jpg