第六十七天 js动画

1.事件总结

鼠标事件

var box = document.querySelect('.box')
// 1.点击事件
box.onclick = function(){
   console.log('单击');
};
// 2.双击事件（应用场景不广）
box.ondblclick = function(){
    cosole.log("双击"）
}
// 3.鼠标右键
box.oncintextment = function(){
    console.log("右键了")
    return false;
};
// 4.鼠标悬浮 | 移动  | 按下 | 抬起 | 离开
box.onmouseover = function(){
    console.log("悬浮"）;
};
box.onmousemove = function(){
    console.log("移动");
);
box.onmousedown = function(){
    console.log("按下");
};
box.onmouseup = function(){
    console.log("抬起")
};
box.onmouseout = function(){
    console.log("离开");
};

over | out vs enter | leave

总结：

　　1.将子级与父级分开考虑，大家都有各自的悬浮离开事件，采用 over | out组合

　　2.将子级纳入父级考虑范围，也就是只有父级取相应悬浮离开事件，采用enter | leave组合

　　3.单独考虑一个盒子的悬浮离开事件，两套均可以

特性：

　　从父级移至子级，会触发out事件，紧接着触发子级的over事件，并可以冒泡给父级

　　从父级移至子级，leave事件并不会触发，它认为子级是属于父级的一部分，enter事件，也不   　　会再次触发

悬浮子级:

　　sub over => sup over 支持冒泡

　　sub enter =>sub enter 不支持冒泡

键盘事件

　　onkeydown: 键盘按下会触发，长按会持续触发

　　onkeup: j键盘抬起会触发

　　ev.keyCode:按下的键盘键的标号

其他事件

　　window.onload:页面加载完毕触发

　　window.onscroll | document.onscroll => window.scrollY(页面下滚距离）：页面滚动触发

二.js盒模型

content:通过计算后样式获取
padding + content + content:box.offsetWidth | box.offsetHeight
绝对定位top|left:box.offsetTop | box.offsetLeft

三.动画

定时器

// 一次性定时器
var timeout = setTimeout(function(a,b){},1000,10,20);

// 持续性定时器
var timer = setInterval(function(a,b){},1000,10,20);

// 清除定时器
// clearTimeout | clearInterval

// 结论：
// 1.定时器刽立即执行
// 2.一次定时器只能执行一次，持续性定时器不做清除的话会一直执行
// 3.声明定时器第一个参数为逻辑函数地址，第二个参数为事件间隔，第三个为逻辑函数所需要参数（可以为多个，一般省略）
// 4.清除定时器可以混用，本质就是清除创建定时器的数字标号，该编号激素是创建定时器的返回值

// 小技巧：如果页面中有n个定时器
var n = setTimeout(function(){},1);
for (var I = 1;i <n; I++){
    clearInterval(i)
}