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

缓动动画封装：