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) }