mouseover和mouseenter,mouseout和mouseleave的区别-引发的探索

时间:2022-01-27 00:00:07

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