知识点：
模拟滚动条的解除事件问题 ；
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树结构）顺序执行事件；
不会冒泡的事件：blurfocusloadunloadonmoissenteronmouseleave ;
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]; }
缓动动画封装：
function animate(ele,json,fn){ //先清定时器 clearInterval(ele.timer); ele.timer = setInterval(function () { //开闭原则 var bool = true; //遍历属性和值，分别单独处理json //attr == k(键) target == json[k](值) for(var k in json){ //四部 var leader = parseInt(getStyle(ele,k)) || 0; //1.获取步长 var step = (json[k] - leader)/10; //2.二次加工步长 step = step>0?Math.ceil(step):Math.floor(step); leader = leader + step; //3.赋值 ele.style[k] = leader + "px"; //4.清除定时器 //判断: 目标值和当前值的差大于步长，就不能跳出循环 //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。 if(json[k] !== leader){ bool = false; } } console.log(1); //只有所有的属性都到了指定位置，bool值才不会变成false； if(bool){ clearInterval(ele.timer); //所有程序执行完毕了，现在可以执行回调函数了 //只有传递了回调函数，才能执行 if(fn){ fn(); } } },25); } //兼容方法获取元素样式 function getStyle(ele,attr){ if(window.getComputedStyle){ return window.getComputedStyle(ele,null)[attr]; } return ele.currentStyle[attr]; }