相信小伙伴们都用过鼠标事件，比如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

　　

有需要的朋友可以领取支付宝到店红包，能省一点是一点