JS三大家族
JS的三大家族主要是Offset、Scroll场仲、Client间涵，通過對三大家族不同屬性的靈活使用仁热，我們可以模擬出很多炫酷的JS動畫，增強界面的視覺感染力勾哩！讓靜態(tài)頁面活起來抗蠢！
Client家族屬性介紹
- clientWidth 獲取網(wǎng)頁可視區(qū)域?qū)挾龋▋煞N用法）
- clientHeight 獲取網(wǎng)頁可視區(qū)域高度（兩種用法）
調(diào)用者不同，意義不同：
盒子調(diào)用： 指盒子本身思劳。
body/html調(diào)用： 可視區(qū)域大小迅矛。 - clientX 鼠標距離可視區(qū)域左側(cè)距離（event調(diào)用）
clientY 鼠標距離可視區(qū)域上側(cè)距離（event調(diào)用） - clientTop/clientLeft 盒子的border寬高
三大家族區(qū)別
-
Width和height
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
scrollWidth = 內(nèi)容寬度（不包含border）
scrollHeight = 內(nèi)容高度（不包含border） -
top和left
- offsetTop/offsetLeft ：
調(diào)用者：任意元素。(盒子為主)
嘛作用：距離父系盒子中帶有定位的距離敢艰。 - scrollTop/scrollLeft:(盒子也可以調(diào)用诬乞，必須有滾動條)
調(diào)用者：document.body.scrollTop/.....(window)
嘛作用：瀏覽器無法顯示的部分（被卷去的部分）。 -
clientY/clientX:（clientTop/clientLeft 值的是border）
調(diào)用者：event.clientX(event)
嘛作用：鼠標距離瀏覽器可視區(qū)域的距離（左钠导、上）。
區(qū)別圖示所示：
三大家族區(qū)別.png
- offsetTop/offsetLeft ：
另外一個版本的三大家族區(qū)別
offset家族
offsetHeight: 元素高森瘪，height+border+padding
offsetWidth: 元素寬牡属，width+border+padding
offsetTop: 上邊距離帶有定位的父盒子的距離（重要）
offsetLeft: 左邊距離帶有定位的父盒子的距離（重要）
offsetParent: 最近的帶有定位的父盒子scroll家族
scrollHeight: 內(nèi)容高，不含border
scrollWidth: 內(nèi)容寬扼睬，不含border
scrollTop: document.documentELement.scrollTop || document.body.scrollTop; （重要）window.pageXOffset;
瀏覽器頁面被卷去的頭部
元素調(diào)用.必須具有滾動條的盒子調(diào)用逮栅。盒子本身遮擋住的子盒子內(nèi)容。
子盒子被遮擋住的頭部
scrollLeft: document.documentELement.scrollLeft: || document.body.scrollLeft: ; （重要）window.pageYOffset;
瀏覽器頁面被卷去的左側(cè)
元素調(diào)用.必須具有滾動條的盒子調(diào)用窗宇。盒子本身遮擋住的子盒子內(nèi)容措伐。
子盒子被遮擋住的左側(cè)client家族
clientHeight: 元素高，height+padding;
window.innerHeight; document.body.clientHeight 可視區(qū)域的高
clientWidth: 元素寬军俊，width+padding;
window.innerWidth; document.documentElementWidth; 可視區(qū)域的寬
clientTop: 元素的上border寬
clientLeft: 元素的左border寬
clientY 調(diào)用者：event.clientY(event)（重要）
作用：鼠標距離瀏覽器可視區(qū)域的距離侥加，上
clientX 調(diào)用者：event.clientX(event)（重要）
作用：鼠標距離瀏覽器可視區(qū)域的距離，左
client家族特殊用法：檢查瀏覽器寬高（可視區(qū)域）兼容性寫法
//獲取屏幕可視區(qū)域的寬高
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像素担败，都會觸動這個事件。調(diào)用方式：
window.onresize = function () {
//document.title = client().width + " "+ client().height;
}
案例：根據(jù)瀏覽器可視區(qū)域大小镰官，給定背景色
<!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;
//頁面加載的時候直接執(zhí)行一次函數(shù)拓哺，確定瀏覽器可視區(qū)域的寬害淤，給背景上色
fn();
//封裝成函數(shù)，然后指定的時候去調(diào)用和綁定函數(shù)名
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;
}
事件冒泡
事件冒泡: 當一個元素上的事件被觸發(fā)的時候，比如說鼠標點擊了一個按鈕鸽凶，同樣的事件將會在那個元素的所有祖先元素中被觸發(fā)币砂。這一過程被稱為事件冒泡；這個事件從原始元素開始一直冒泡到DOM樹的最上層玻侥。(BUG)（本來應該一人做事一人當决摧，結(jié)果，我做錯了事情凑兰，你去告訴我媽）
什么是冒泡：子元素事件被觸動掌桩，父盒子的同樣的事件也會被觸動。取消冒泡就是取消這種機制姑食。
- 阻止冒泡
W3C的方法：（火狐波岛、谷歌、IE11）
event.stopPropagation()
IE10以下則是使用：event.cancelBubble = true
兼容性寫法：
var event = event || window.event;
if(event && event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
事件捕獲
事件捕獲和事件冒泡的機制相反
事件捕獲是先從頂級父控件開始響應方法音半，最終才調(diào)用觸發(fā)事件的子控件的響應事件
addEventListenner(參數(shù)1则拷，參數(shù)2，參數(shù)3)
調(diào)用者是：事件源曹鸠。 參數(shù)1：事件去掉on 參數(shù)2 ：調(diào)用的函數(shù)
參數(shù)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>
案例：隱藏模態(tài)框
<!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>
//需求：點擊登錄按鈕，顯示模態(tài)框叛薯。點擊出去login以外的所有盒子隱藏模態(tài)框浑吟。
//步驟：
//1.給登錄綁定事件
//2.給document綁定事件，因為可以冒泡耗溜，只要判斷组力，點擊的不是login，那么隱藏模態(tài)框
//1.給登錄綁定事件
var mask = document.getElementsByClassName("mask")[0];
var a = document.getElementsByTagName("a")[1];
a.onclick = function (event) {
//顯示模態(tài)框
show(mask);
//阻止冒泡
event = event || window.event;
if(event && event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
//2.給document綁定事件抖拴，因為可以冒泡燎字，只要判斷腥椒，點擊的不是login，那么隱藏模態(tài)框
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>
事件委托
事件委托是冒泡的一個應用，普通的事件綁定妖异，沒有辦法為新創(chuàng)建的元素綁定響應的事件惋戏，所以就出現(xiàn)了事件委托，將事件綁定到父級元素他膳，根據(jù)標簽名稱等因素响逢，為子控件添加對應的事件響應。具體示例如下：
<!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>創(chuàng)建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);
}
}
//普通的時間綁定棕孙，沒有辦法為新創(chuàng)建的元素綁定事件舔亭。所以我們要使用冒泡的特性，事件委托蟀俊！
//事件委托
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>
歡迎關注我的個人微信公眾號，免費送計算機各種最新視頻資源欧漱！你想象不到的精彩职抡！
