WebAPI编程 - JavaScript网页编程（2）- 必掌握知识点 - #博学谷IT学习技术支持#

本文链接：https://blog.csdn.net/weixin_44946585/article/details/125470130

文章目录

1.DOM 简介

1.1 DOM：文档对象模型

1.2 DOM树

文档：一个页面就是一个文档，DOM 中使用 document 表示
元素：页面中的所有标签都是元素，DOM 中使用 element 表示
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示

DOM 把以上内容都看作是对象

2. 获取元素

2.1 根据 id 获取

方法： document.getElementById('id名') 返回一个匹配特定 id 的 DOM Element 对象，其中 id 名必须是 字符串
注意：
- 书写位置：因为我们文档页面从上往下加载，所以先得有标签，所以我们 script 写道标签的下面
- console.dir()打印我们返回的元素对象，更好的查看里面的属性和方法

2.2 根据标签名获取

方法：document.getElementsByTagName('标签名') 返回带有指定标签名的对象的集合（伪数组），其中标签名以字符串形式写入
想要依次打印标签名对象的集合可以采用遍历的方式
element.getElementsByTagName('标签名') 可以得到这个元素（element）里面的某些标签

2.3 通过 HTML5 新增的方法获取

document.getElementsByClassName(‘类名) 根据类名获得某些元素集合参数为 string
❗document.querySelector('选择器') 返回指定选择器的第一个元素对象参数为 string id 要加 # class 要加 .
❗document.querySelectorAll('选择器') 返回指定选择器的所有元素对象集合（伪数组）

2.4 获取特殊元素

获取 body 元素
- document.body
获取 html 元素
- document.documentElement

3. 事件基础

3.1 事件

事件三要素
1. 事件源：事件被触发的对象
2. 事件类型：如何触发，什么事件，比如鼠标点击（onclick），鼠标经过，键盘按下
3. 事件处理程序：通过一个函数赋值的方式完成
```
var btn =  document.getElementById('btn');
btn.onclick = function() {
    alert('你好');
}
```

常见的鼠标事件

鼠标事件	触发条件
`onclick`	鼠标点击左键触发
`onmouseover`	鼠标经过触发
`onmouseout`	鼠标离开触发
`onfocus`	获得鼠标焦点触发
`onblur`	失去鼠标焦点触发
`onmousemove`	鼠标移动触发
`onmouseup`	鼠标弹起触发
`onmousedown`	鼠标按下触发

4. ❗❗操作元素（注意以下学习的都是属性）

4.1 改变元素内容（普通盒子用的）

element.innerText
❗element.innerHTML
以上两者的区别：innerText 不识别 HTML 标签，在读取的时候不识别空格和换行；innerHTML 识别 HTML 标签，且 W3C 标准，读取时识别空格和换行；这两个属性是可读写的。

4.2 常用元素的属性操作

innerText、innerHTML
src、href
id、alt、title

获取元素 . 属性 = 直接赋值

4.3 表单元素的属性操作

DOM 能操作的表单元素的属性有：type、value、checked、selected、disabled
表单里面的值，文字内容是通过 value 来修改的
想要某个表单被禁用，不能再点击，使用 disabled，将其值设置为 true

4.4 样式属性操作（大小、颜色、位置等样式）

element.style 行内样式操作
element.className 类名样式操作

this.style.backgroundColor = 'purple'; // 采用驼峰命名法
this.style.width = '250px'; // 注意单位
this.className = '新类名';

注意：

js 里面的样式采取驼峰命名法
js 修改 style 样式操作，产生的是行内样式，css 权重比较高
如果修改样式较多，可采用修改类名的方式
class 因为是保留字，因此使用 className
className 会直接更改元素的类名，会覆盖原先的类名

4.5 总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vzkxzhF5-1656227211805)(C:\Users\WZX\AppData\Roaming\Typora\typora-user-images\image-20220619195510950.png)]

4.6 自定义属性的操作

获取属性值
- element.属性 获取属性值
- element.getAttribute('属性');
区别：
- element.属性 获取内置属性值（元素本身自带的属性）
- ❗element.getAttribute('属性'); 获取自定义属性（程序员自定义的）
设置属性值
- element.属性 = '值' 设置内置属性
- ❗element.setAttribute('属性', '值'); 主要针对于自定义属性，也可修改内置属性（class 特殊，不写 className，直接写 class）
移除属性
- ❗element.removeAttribute('属性');

4.7 H5 自定义属性

自定义属性的目的：为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
H5 规定自定义属性 data- 开头作为属性名且赋值
- 如：<div data-index='1'></div>
获取 H5 自定义属性
- ❗兼容性获取element.getAttribute('属性');
- H5 新增 element.dataset.index 或者 element.dataset['index'] ie11才开始支持（注意：如果自定义属性里面有多个 - 连接的单词，我们获取的时候采用 驼峰命名法）【只能获取 data- 开头的】

5. 节点操作

5.1 节点概述

节点至少拥有 nodeType（节点类型）、nodeName（节点名称）、nodeValue（节点值）这三个基本属性

元素节点 nodeType 为 1
属性节点 nodeType 为 2
文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等）

5.2 节点层级

父级节点

node.parentNode
- 返回的是最近的父节点
- 如果指定的节点没有父节点则返回 null
子节点
1. parentNode.childNode(标准) （包含文本节点、元素节点、文本节点）
  - 返回包含指定节点的子节点的集合，该集合为即时更新的集合
2. ❗parentNode.children （非标准）
  - 返回所有的子元素节点。只返回子元素节点，其余不返回（重点掌握）
  - 虽然是非标准，但是得到了各个浏览器的支持
3. parentNode.firstChild
  - 返回第一个子节点，不管是文本节点还是元素节点
4. parentNode.lastChild
  - 返回最后一个子节点，不管是文本节点还是元素节点
5. parentNode.firstElementChild（兼容性问题，ie9以上支持）
  - 返回第一个子元素节点
6. parentNode.lastElementChild（兼容性问题，ie9以上支持）
  - 返回最后第一个子元素节点
7. 实际开发的写法，既没有兼容性问题又返回第一个子元素
  - parentNode.children[0]
  - parentNode.children[索引长度 - 1]
兄弟节点（用得少）
1. node.nextSibling
  - 返回当前元素的下一个兄弟节点，找不到则返回 null。同样，也是包含所有的节点。
2. node.previousSibling
  - 返回当前元素的上一个兄弟节点，找不到则返回 null。同样，也是包含所有的节点。
3. ❗node.nextelEmentSibling （兼容性问题，ie9以上支持）
  - 返回下一个兄弟元素节点
4. ❗node.previousElementSibling （兼容性问题，ie9以上支持）
5. 解决上述兼容性问题——>自己封装一个函数
```
function getNextElementSibling(element) {
    var el = element;
    while (el = el.nextSibling) {
        if (el.nodeType === 1) {
            return el;
        }
    }
    return null;
}
```

5.3 创建、添加节点

创建节点 document.createElement('tagName')
- 方法创建由 tagName 指定的 HTML 元素。
添加节点
1. node.appenChild(child)
  - node 一定是父级 child 一定是子级
  - 后面追加元素，类似数组中的 append
2. node.insertBefore(child, 指定元素)
  - 指定元素前面添加

5.4 删除节点

node.removeChild(child)
- 返回删除的节点
补充：阻止连接跳转需要添加 javascript:void(0); 或者 javascript:;

5.5 复制节点

node.cloneNode()
- 方法返回调用该方法的节点的一个副本
- 注意：
  - 如果括号参数为空或者为 false，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点
  - 如果括号参数为空或者为 true，则是深拷贝，复制节点本身包括子节点

5.6 三种动态创建元素区别

document.write()
element.innerHTML
element.createElement()

区别：

document.write()是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘
innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂
creatElement() 创建多个元素效率稍低一点点，但是结构更清晰

总结：不同浏览器下，innerHTML 效率要比 creatElement 高

6. 事件详解

6.1 注册事件

注册事件有两种方式：传统方式和方法监听注册方式
❗传统注册方式：onclick…类似的
- 特点：注册事件唯一
方法监听注册方式
- w3c 标准推荐方式
- addEventListener()它是一个方法
- IE9 之前的不支持，可使用attachEvent()代替
- 特点：同一个元素同一个事件可以注册多个监听器
❗addEventListener() 事件监听方式
- 语法：eventTarget.addEventListener(type, listener[, useCapture])
  - type：事件类型字符串，比如：click、mouseover ，注意这里不需要 on
  - listener：事件处理函数，事件发生时，会调用监听函数
  - useCapture：可选参数，是一个布尔值，默认是 false。后面会进一步学习
（了解）attachEvent()事件监听方式
- 语法：eventTarget.attachEvent(eventNameWithOn, callback)
  - eventNameWithOn：事件类型字符串，比如 onclick、onmouseover，这里要带 on
  - callback：事件处理函数，当目标触发事件时回调函数被调用

6.2 删除事件

传统注册方式
- eventTarget.onclick = null;
方法监听注册方式
- eventTarget.removeEventListener(type, listener[, useCapture]);（不能使用匿名函数）
```
div.addEventListener('click', fn) // 里面的 fn  不需要调用加小括号

function fn() {
    alert(22);
    div.removeEventListener('click', fn);
}
```
- （了解）eventTarget.detachEvent(eventNameWithOn, callback);

7. DOM 事件流

事件流：描述的是从页面中接收事件的顺序
DOM 事件流分为 3 个阶段：
1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段

注意：
1. JS 代码中只能执行捕获或者冒泡其中一个阶段
2. onclick 和 attachEvent 只能得到冒泡阶段
3. eventTarget.addEventListener(type, listener[, useCapture])第三个参数如果是 true，表示在事件捕获阶段调用事件处理程序；如果是 false（默认0），表示在事件冒泡阶段调用事件处理程序。
4. 实际开发中，我们更关注事件冒泡
5. 有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave
6. 事件冒泡有时候会带来麻烦或者好处（后面讲解）

8. 事件对象

8.1 事件对象

div.onclick = function(event) {}

代码中的 event 就是一个事件对象，写到侦听函数的，当形参来看
事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数
事件对象是我们事件的一系列相关数据的集合，跟事件相关的，比如鼠标点击里面就包含了鼠标的相关信息，鼠标坐标啊，如果是键盘事件里面就包含的键盘事件的信息，比如，判断用户按下了哪个键
事件对象我们可以自己命名，如 event、evt、e
事件对象也有兼容性问题，ie678 通过 window.event

8.2 事件对象的常见属性和方法

事件对象属性方法	说明
`e.target`	返回触发事件的对象标准
`e.srcElement`	返回触发事件的对象非标准 ie678使用
`e.type`	返回事件的类型比如 click mouseover 不带 on
`e.cancelBubble`	该属性阻止冒泡非标准 ie678使用
`e.returnValue`	该属性阻止默认事件（默认行为）非标准 ie678 使用比如不让链接跳转
`e.preventDefault()`	该方法阻止默认事件（默认行为）标准比如不让链接跳转
`e.stopPropagation()`	阻止冒泡标准

阻止事件冒泡的两种方式

❗标准写法e.stopPropagation() 兼容性问题

div.addEventListener('click', function(e) {
    e.stopPropagation();	// 取消 穿破
}, false);

非标准写法：ie678 利用事件对象 cancelBubble 属性

div.addEventListener('click', function(e) {
    e.cancelBubble = true;	// 取消冒泡
}, false);

8.3 事件委托（事件冒泡带来的好处）

事件委托的原理（面试重点）
- 不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。
- 例子：给 ul 添加注册事件，然后利用事件对象的 target 找到当前点击的 li，因为点击 li，事件会冒泡到 ul 上，ul 有注册事件，就会触发事件监听器。
事件委托的作用
- 我们之操作了一次 DOM，提高了程序的性能。

8.4 常用的鼠标事件

禁止鼠标右键菜单

contextmenu 可以禁用右键菜单

document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
});

禁止鼠标选中

selectstart 开始选中

document.addEventListener('selectstart', function(e) {
    e.preventDefault();
});

鼠标事件对象

鼠标事件对象	说明
`e.clientX`	返回鼠标相对于浏览器窗口可视区的 X 坐标
`e.clientY`	返回鼠标相对于浏览器窗口可视区的 Y 坐标
❗`e.pageX`	返回鼠标相对于文档页面的 X 坐标 IE9+ 支持
❗`e.pageY`	返回鼠标相对于文档页面的 Y 坐标 IE9+ 支持
`e.screenX`	返回鼠标相对于电脑屏幕的 X 坐标
`e.screenY`	返回鼠标相对于电脑屏幕的 Y 坐标

常用键盘事件

键盘事件	触发条件
`onkeyup`	某个键盘按键被松开时触发
`onkeydown`	某个键盘按键被按下时触发
`onkeypress`	某个键盘按键被按下时触发但是它不识别功能键比如 ctrl shift 箭头等

注意：

如果使用 addEventListener 不需要加 on
三个事件的执行顺序：keydown – keypress – keyup

8.5 键盘事件对象

键盘事件对象属性	说明
`keyCode`	返回该键的 ASCII 值

注意：

keyup 和 keydown 事件不区分字母大小写 a 和 A 得到的都是 65
keypress 事件区分字母大小写

补充：搜索框获得焦点：使用 js 里面的 focus() 方法

9. BOM 简介

9.1 BOM：浏览器对象模型

它提供了独立于内容而与浏览器窗口进行交互的对象
把浏览器当作一个对象来看待
BOM 的顶级对象是 window
BOM 学习的是浏览器窗口交互的一些对象
BOM 是浏览器尝试在各自浏览器上定义的，兼容性较差

9.2 BOM 的构成

BOM 比 DOM 更大，它包含 DOM。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4bgpux2t-1656227211808)(C:\Users\WZX\AppData\Roaming\Typora\typora-user-images\image-20220622090445110.png)]

10. window 对象的常见事件

10.1 窗口加载事件

window.onload = function() {}
或者
window.addEventListener("load", function() {});

window.onload 是窗口加载事件，在文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等），就调用的处理函数
注意：
- 有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕，再去执行处理函数。
- window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个 window.onload 为准。
- 如果使用 addEventListener 则没有限制

document.addEventListener('DOMContentLoaded', function() {})

load 事件等页面内容全部加载完毕，包含页面的 dom 元素、图片、flash、css等等
DOMContentLoaded 是 DOM 加载完毕，不包含图片、flash、css等就可以执行，加载速度比 load 更快一些

10.2 调整窗口大小事件

window.onresize = function() {}
window.addEventListener('resize', function() {});

注意：
- 只要窗口大小变化就会触发这个事件
- 我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度

11. 定时器

11.1 两种定时器

setTimeout() 定时器
```
window.setTimeout(调用函数, [延迟毫秒数]);
```
- 这个 window 在调用的时候可以省略
- 这个延时时间单位是毫秒，省略的话默认为 0
- 这个调用函数可以直接写函数，还可以写函数名，还有一个写法 '函数名()' 但不提倡
- 页面中可能有很多的定时器，我们经常给定时器加标识符（名字）
停止 setTimeout() 定时器
```
window.clearTimeout(timeoutID)
```
- window 可省
- 里面的参数就是定时器的标识符
setInterval() 定时器
```
window.setInterval(调用函数, [延迟毫秒数]);
```
setInterval() 方法反复调用一个函数，每隔这个时间，就去调用一次回调函数
- 这个 window 在调用的时候可以省略
- 这个延时时间单位是毫秒，省略的话默认为 0
- 这个调用函数可以直接写函数，还可以写函数名，还有一个写法 '函数名()' 但不提倡
- 页面中可能有很多的定时器，我们经常给定时器加标识符（名字）
停止 setInterval() 定时器
```
window.clearInterval(intervalID);
```
- window 可省
- 里面的参数就是定时器的标识符

11.2 this

全局作用域或者普通函数中 this 指向全局对象 window（注意定时器里面的 this 指向 window）
方法调用中谁调用该方法，this 指向谁
构造函数中 this 指向构造函数的实例

12. JS 执行机制

12.1 JS 是单线程

JS 的一大特点就是单线程（同一时间只能做一件事）。
单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。导致问题：如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

12.2 同步和异步

同步
- 前一个任内务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。
异步
- 你在做一件事情是，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其他事情。
同步任务
- 同步任务都是在主线程上执行，形成一个执行栈
异步任务
- JS 的异步是通过回调函数实现的
- 一般而言，异步任务有以下三种类型：
  - 普通事件，如 click、resize 等
  - 资源加载，如 load、error 等
  - 定时器，包括 setInterval、setTimeout 等

12.3 JS 执行机制

限制性执行栈中的同步任务
异步任务（回调函数）放入任务队列中
一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行

由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（event loop）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-te9Ju6KF-1656227211817)(C:\Users\WZX\AppData\Roaming\Typora\typora-user-images\image-20220622151928517.png)]

13. location 对象

13.1 什么是 location 对象

window 对象给我们提供了一个 location 属性用于获取或设置窗体的 URL，并且可以用于解析 URL。
这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象。

URL（统一资源定位符）：是互联网上标准资源的地址。

URL的一般语法格式为：

protocol://host[:port]/path/[?query]#fragment
例：http://www.itcast.cn/index.html?name=andy&age=18#link

组成	说明
protocol	通信协议常用的 http，ftp，maito 等
host	主机（域名）
port	端口号可选，省略时使用方案的默认端口如http的默认端口为80
path	路径由零或多个 ‘/’ 符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
query	参数以键值对的形式，通过 & 符号分隔开来
fragment	片段 #后面内容常见于链接锚点

13.2 location 对象的属性

location对象属性	返回值
❗`location.href`	获取或者设置整个 URL
`location.host`	返回主机（域名）www.itheima.com
`location.port`	返回端口号如果未写返回空字符串
`location.pathname`	返回路径
❗`location.search`	返回参数
`location.hash`	返回片段 #后面内容常见于链接锚点

13.3 location 对象的方法

location对象方法	返回值
`location.assign()`	跟 href 一样，可以跳转页面（也称为重定向页面）【记录浏览历史，可以后退】
`location.replace()`	替换当前页面，因为不记录历史，所以不能后退页面
`location.reload()`	重新加载页面，相当于刷新按钮或者 f5 如果参数为 true强制刷新 ctrl+f5

14. navigator 对象

navigator 对象包含有关浏览器的信息，它有很多属性，最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。

可以判断用户哪个终端打开页面，实现跳转。

15.history 对象

与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的 URL

history对象方法	作用
`back()`	可以后退功能
`forward()`	前进功能
`go(参数)`	前进后退功能，参数如果是1，前进1个页面，如果是 -1，后退一个页面

16. 元素偏移量 offset 系列

16.1 offset 概述

我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

获得元素距离带有定位父元素的位置
获得元素自身的大小（高度宽度）
注意：返回的数值都不带单位

offset 常用属性

offset系列属性	作用
`element.offsetParent`	返回作为该元素带有定位的父级元素如果父级元素没有定位则返回 body
`element.offsetTop`	返回元素相对带有定位父元素上方的偏移
`element.offsetLeft`	返回元素相对带有定位父元素左边框的偏移
`element.offsetWidth`	返回自身包括 padding、边框、内容区的宽度，返回数值不带单位
`element.offsetHeight`	返回自身包括 padding、边框、内容区的高度，返回数值不带单位

16.2 offset 和 style 区别

offset
- offset 可以得到任意样式表中的样式值
- offset 系列获得的数值没有单位的
- offsetWidth 包含 padding+border+width
- offsetWidth 等属性是只读属性，只能获取不能赋值
- 所以，我们想要获取元素大小位置，用 offset 更合适
style
- style 只能得到行内样式表中的样式值
- style.width 获得的是带有单位的字符串
- style.width 获得不包含 padding 和 border 的值
- style.width 是可读写属性，可以获取也可以赋值
- 所以，我们想要给元素更改值，则需要用 style 改变

17. 元素可视区 client 系列

我们使用 client 系列的相关属性来获取元素可视区的相关信息。

clent系列属性	作用
`element.clientTop`	返回元素上边框的大小
`element.clientLeft`	返回元素左边框的大小
`element.clientWidth`	返回自身包括 padding、内容区的宽度，不含边框，返回数值不带单位
`element.clientHeight`	返回自身包括 padding、内容区的高度，不含边框，返回数值不带单位

17.1 立即执行函数

立即执行函数：不需要调用，立马能够自己执行的函数
写法
1. (function() {})();
2. (function() {}());
立即执行函数最大的作用就是：独立创建了一个作用域，里面所有的变量都是局部变量，不会有命名冲突的情况

18. 元素滚动 scroll 系列

我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

scroll 系列属性	作用
`element.scrollTop`	返回被卷去的上侧距离，返回数值不带单位
`element.scrollLeft`	返回被卷去的左侧距离，返回数值不带单位
`element.scrollWidth`	返回自身实际的宽度，不含边框，包含 padding ，返回数值不带单位
`element.scrollHeight`	返回自身实际的高度，不含边框，包含 padding ，返回数值不带单位

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4h98pMUe-1656227211818)(C:\Users\WZX\AppData\Roaming\Typora\typora-user-images\image-20220623094704128.png)]

滚动事件：scroll 当我们滚动条发生变法时会触发的事件

div.addEventListener('scroll', ffunction() {
                     console.log(div.scrollTop);
                     })

页面被卷去头部兼容性解决方案
1. 声明了 DTD，使用 document.documentElement.scrollTop
2. 未声明 DTD，使用 document.body.scrollTop
3. 新方法 window.pageYOffset（页面被卷去的头部）和 window.pageXOffset（页面被卷去的左侧），IE9 开始支持

三大系列总结

三大系列大小对比	作用
`element.offsetWidth`	返回自身包括 padding、边框、内容区的宽度，返回数值不带单位
`element.clientWidth`	返回自身包括 padding、内容区的宽度，不含边框，返回数值不带单位
`element.scrollWidth`	返回自身实际的宽度，不含边框，包含 padding ，返回数值不带单位

他们主要用法：

offset 系列经常用于获取元素位置 offsetLeft offsetTop
client 经常用于获取元素大小 clientWidth clientHeight
scroll 经常用于获取滚动距离 scrollTop scrollLeft
注意页面滚动的距离通过 window.pageXOffset 获得

19. 动画函数封装

❗mouseenter 和 mouseover 的区别

mouseenter 鼠标事件
- 当鼠标移动到元素上时就会触发 mouseenter 事件
- 类似 mouseover，他们两者之间的区别是：
  - mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。
  - mouseenter 只会经过自身盒子触发（不会冒泡）

19.1 动画实现原理

核心原理：通过定时器 setInterval() 不断移动盒子位置
实现步骤：
1. 获得盒子当前位置
2. 让盒子在当前位置加上 1 个移动距离
3. 利用定时器不断重复这个操作
4. 加一个结束定时器的条件
5. 注意此元素需要添加定位，才能使用 element.style.left

19.2 动画函数简单封装（匀速动画）

注意函数需要传递 2 个参数，动画对象和移动到的距离

function animate(obj, target) {
    // 防止多次点击按钮 开启多个定时器，所以在开始处先清除以前的定时器
    clearInterval(obj.timer);
    // 给不同元素指定了不同的定时器
    obj.timer = setInterval(function() {
        if(obj.offsetLeft >= target) {
            // 停止动画 本质是停止定时器
            clearInterval(obj.timer);
        }
        obj.style.left = obj.offsetLeft + 1 + 'px';
    }, 30)
}

19.3 缓动效果原理

缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来

思路：

让盒子每次移动的距离慢慢变小，速度就会慢慢落下来
核心算法：（目标值 - 现在的位置）/ 10 作为每次移动的距离步长
停止的条件是：让当前盒子位置等于目标位置就停止定时器
注意步长值需要取整

function animate(obj, target) {
    // 防止多次点击按钮 开启多个定时器，所以在开始处先清除以前的定时器
    clearInterval(obj.timer);
    // 给不同元素指定了不同的定时器
    obj.timer = setInterval(function() {
        // 把我们步长值改为整数 不要出现小数的问题
        // var step = Math.ceil((target - obj.offsetLeft) / 10);
        var step = target - obj.offsetLeft;
        step > 0 ? Math.ceil(step) : Math.floor(step);
        if(obj.offsetLeft >= target) {
            // 停止动画 本质是停止定时器
            clearInterval(obj.timer);
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：目标值 - 现在的位置）/ 10
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 30)
}

19.4 缓动动画添加回调函数

function animate(obj, target, callback) {
    // 防止多次点击按钮 开启多个定时器，所以在开始处先清除以前的定时器
    clearInterval(obj.timer);
    // 给不同元素指定了不同的定时器
    obj.timer = setInterval(function() {
        // 把我们步长值改为整数 不要出现小数的问题
        // var step = Math.ceil((target - obj.offsetLeft) / 10);
        var step = target - obj.offsetLeft;
        step > 0 ? Math.ceil(step) : Math.floor(step);
        if(obj.offsetLeft >= target) {
            // 停止动画 本质是停止定时器
            clearInterval(obj.timer);
            // 回调函数写到定时器结束里面
            if(callback) {
                // 调用函数
                callback();
            }
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：目标值 - 现在的位置）/ 10
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 30)
}