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
- offsetTop/offsetLeft ：
调用者：任意元素。(盒子为主)
嘛作用：距离父系盒子中带有定位的距离。 - scrollTop/scrollLeft:(盒子也可以调用，必须有滚动条)
调用者：document.body.scrollTop/.....(window)
嘛作用：浏览器无法显示的部分（被卷去的部分）。 -
clientY/clientX:（clientTop/clientLeft 值的是border）
调用者：event.clientX(event)
嘛作用：鼠标距离浏览器可视区域的距离（左、上）。
区别图示所示：
三大家族区别.png
- offsetTop/offsetLeft ：
另外一个版本的三大家族区别
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支持捕获。
事件冒泡与事件捕获测试小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>
欢迎关注我的个人微信公众号，免费送计算机各种最新视频资源！你想象不到的精彩！
