知识点：
模拟滚动条的解除事件问题 ；
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];
}
缓动动画封装：
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];
}