相信小伙伴们都用过鼠标事件，比如mouseover和mouseout，mouseenter和mouseleave。它们都分别表示鼠标移入移出。
在使用的过程中，其实一直有个小疑问——它们之间究竟有什么区别？但此前一直没有去真正了解过。
后来看了一些博客，总结出了最大的不同：
①：mouseover/mouseout是冒泡事件。
②：mouseenter/mouseleave不冒泡。
建议：需要为多个元素监听鼠标移入/出事件时，推荐使用mouseover/mouseout，提高性能
解决上面的疑问以后，突然来了兴致，就顺道把其它平时经常在用，但不知道区别或者比较模糊的也做了一个探究如下：
1️⃣：focus/blur与focusin/focusout的区别
①：focus/blur不冒泡，兼容性更好
②：focusin/focusout冒泡
2️⃣：scrollWidth和offsetWidth和clientWidth的区别
①：clientWidth/clientHeight-对象可视区域宽高，返回值只包含content + padding，不包含滚动条和border
②：offsetWidth/offsetHeight-对象实际宽高，返回值包含content + padding + border + 滚动条
③：scrollWidth/scrollHeight，对象滚动区域的宽高，返回值包含content + padding + 溢出内容的尺寸
https://www.cnblogs.com/kongxianghai/p/4192032.html 详见
3️⃣：documen.write和 innerHTML的区别
①：document.write只能重绘整个页面 （如果你的页面还有其它可见内容，比如2个P标签，里面有文字内容，也会被document.write的值覆盖掉）
②：innerHTML可以重绘页面的一部分
https://blog.csdn.net/u012309349/article/details/47946869 详见
4️⃣： window.onload 和 document.DOMContentLoaded 的区别？
①：当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，无需等待样式表、图像完成加载。
②：另一个不同的事件 load应该仅用于检测一个完全加载的页面。 在使用 DOMContentLoaded 更加合适的情况下使用 load是一个令人难以置信的流行的错误，
所以要谨慎。注意：DOMContentLoaded 事件必须等待其所属script之前的样式表加载解析完成才会触发 （引用CDN的解释）
https://developer.mozilla.org/zh-CN/docs/Web/Events/DOMContentLoaded 详见
5️⃣： src和href的区别
①：src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置。当浏览器解析渲染页面时，
如果发现有src属性时，会立刻解析，并暂停其它资源的下载，直到加载完毕，图片和引用的框架也是如此。 这也是为什么将js脚本放在底部而不是头部。
②：href用于在当前文档和引用资源之间建立联系。
这篇文章整体参考了：https://segmentfault.com/a/1190000015863923#articleHeader40