一、鼠标事件
二、js盒模型
三、鼠标拖拽
四、键盘事件
五、其他时间应用
六、定时器
七、定时器案例
八、随机数
一、鼠标事件
鼠标事件
二、js盒模型
js盒模型
三、鼠标拖拽
鼠标拖拽
四、键盘事件
键盘事件
五、其他时间应用
其他事件
六、定时器
定时器
七、定时器案例
定时器案例 12 : 01 : 35
八、随机数
随机数 随机数
小结：
## 1.事件总结
- 鼠标事件
```js var box = document.querySelector('.box'); // 1. 点击事件 box.onclick = function () { console.log("单击"); }; // 2. 双击事件(应用场景不广) box.ondblclick = function () { console.log("双击"); }; // 3. 鼠标右键 box.oncontextmenu = 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("离开"); } ```
```js // over | out VS enter | leave // 总结: // 1. 将子级与父级分开考虑, 大家都有各自的悬浮离开事件, 采用 over | out 组合 // 2. 将子级纳入父级考虑范围, 也就是只有父级去相应悬浮离开事件, 采用 enter | leave 组合 // 3. 单独考虑一个盒子的悬浮离开事件, 两套均可以
// 特性 // 从父级移至子级, 会触发out事件, 紧接着触发子级的over事件, 并可以冒泡给父级 // 从父级移至子级, leave事件并不会触发, 它认为子级是属于父级的一部分, enter事件, 也不会再次触发
// 悬浮子级: // sub over => sup over 支持冒泡 // sup enter => sub enter 不支持冒泡 ```
- 键盘事件
```js // onkeydown: 键盘按下会触发, 长按会持续触发 // onkeyup: 键盘抬起会触发
// ev.keyCode: 按下的键盘键的标号 ```
- 其他事件
```js // window.onload: 页面加载完毕触发 // window.onscroll | document.onscroll => window.scrollY(页面下滚距离): 页面滚动触发 ```
## 二.js盒模型
```js // content: 通过计算后样式获取 // padding + content: box.clientWidth | box.clientHeight // border + padding + content: box.offsetWidth | box.offsetHeight // 绝对定位top|left: box.offsetTop | box.offsetLeft ```
## 三.动画
- 定时器
```js // 一次性定时器 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) } ```