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

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

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

检测屏幕宽高

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

案例：隐藏模态框

事件委托

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




    
    
    




    我是土著li
    我是土著li
    我是土著li
    我是土著li
    我是土著li
    我是土著li

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

0.jpg