JavaScript进阶（四十四）：onmouseover / out 和 onmouseenter / leave 的区别，JS加载时间线，onload 和 DOMContentLoaded 的区别

我们平常 js 的事件，它里面有一些很常用的事件，这里我们就来稍微的说一说。

首先，我们平时比较常用的 onmouseover / onmouseout。

它其实有一个孪生的兄弟，叫做 onmouseenter / onmouseleave。

 

首先，它跟 onmouseover / out 一样的，它也是鼠标移入，鼠标移出，但是它有一些不一样的地方。

比如，我们来做一个简单的例子：

那么接下来，你可以看到，当我们鼠标移入 div 的时候，弹出 over，这很正常。

但是，我们现在 div 里面还有东西，有一个 button，当我们把鼠标移到 button 上，你会发现，这个 over 也被触发了：

而且最神奇的，并不是说这个移入触发，而是我移出这个 button ，它也触发：

这个其实挺简单的，刚才我们移入那个 button，那个 button 会被触发一个 onmouseover，移入就是触发。

所以这种情况下，那个 onmouseover 会冒泡冒到 div 身上，就造成了我移入 div 有，我在内部移入移出也有。

这个有的时候会很麻烦，也会给我们捣乱。

 

而如果我们用另外一个东西来代替它， 也就是 onmouseenter，也是进入的意思。

你会发现事情就不一样了，刚进入 div，它也有：

但是在里面移动，它就没了：

所以 onmouseenter / leave 它最大的好处就在于，我只有在这个对象作为一个整体进入的时候，它才会发生，在内部移來移去并不会产生任何问题，这个是非常有用的。

 

然后还有一个比较常用的事件，比如 onload。

首先，我们可以用于整个网页 window.onload。

然后除此之外，我们还可以用于各种各样，有加载行为的标签，比方说图片 img.onload。

所以，只要带加载行为的标签，都有 onload，这是一个通用的事件。

然后除了 onload 以外，我们如果说真的要去做 window.onload 其实不是特别的好，我们还有另外一个事件，叫做 DOMContentLoaded，这个东西它比 onload 更好，它的加载时间更快。

 

那可能要有人说，你怎么知道 onload 不好呢？

其实很简单，我们一起来看下 js 的加载时间线：

1，创建 Document 对象，开始解析 web 页面，解析 HTML 元素和它们的文本内容后添加 Element 对象和 Text 节点到文档中，这个阶段 document.readyState = 'loading'。

2，遇见 link 引入的外部 css，创建一个新的线程异步加载，并继续解析文档。

3，遇见 script 外部加载 js，并且没有设置 async、defer，也就是同步加载，浏览器加载，并阻塞，等待 js 加载完成并执行该脚本，然后继续解析文档。（js 拥有修改 DOM 的能力，比如 document.write()）

4，遇到 script 外部 js，并且设置有 async、defer，浏览器创建新的线程去异步加载，并继续解析文档，对于 async 属性的脚本，脚本加载完成后立即执行。（异步禁止使用 document.write() ）

5，遇到 img 等，先正常解析 dom 结构，然后浏览器会开启新线程，异步加载 src，并继续解析文档。

6，当文档解析完成（DOMTree构建完之后），document.readyState = 'interactive'。

7，文档解析完成后（DOMTree构建完之后），所有设置有 defer 的脚本会按顺序执行。（注意与 async 的不同，但同样是禁止使用 document.write() ）

8，文档解析完毕之后（DOMTree构建完之后），document 对象触发 DOMContentLoaded 事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。

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

9，当所有 async 的脚本加载完成并执行完毕后、img 等加载完成后，当页面所有的部分全部下载并执行完毕之后，document.readyState = 'complete'，window 对象触发 load 事件。

10，从此，以异步响应方式处理用户输出、网络事件等。

 

所以，通过 js 的时间线，我们就可以知道它俩的区别：

onload，指的是所有的内容都加载完成。用人话说，指的是 html、css、js、img、video、audio 和一些其他的东西，全都算在里面，等这些东西全部都加载完了之后，浏览器实在没啥事干了，才触发，所以它特别的慢。

而 DOMContentLoaded，从它名字就可以看出来，它只是 DOM 相关的那些内容，所以它只是 html、css、js 这三个东西加载完它就发生了，所以它更好一些。