window的onload事件和domcontentloaded

2023-04-11 16:16:16

 window的onload事件和domcontentloaded

window.onload:

当一个资源及其依赖资源已完成加载时,将触发onload事件。

<!DOCTYPE html>
<html>
  <head>
   <meta charset="utf-8">
   <title>操作对象被加载</title>
      <script>
        window.οnlοad=function(){
	       document.getElementById("s").style.color="red";
           }
       </script>
   </head>

<body>
	<span id="s">123</span>
</body>

</html>

document.onDOMContentLoaded:

当初始的HTML文档被完全加载和解析完成之后,DOMContentLoaded事件被触发,而无需等待样式表、图像和子框架的完成加载。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOMCOntentLoaded事件</title>

</head>

<body>
<script>
function say(){
   alert("文档结构加载完毕");
}
   //添加事件监听
window.addEventListener("DOMCOntentLoaded",say);
</script>
</body>

</html>

区别:

①onload事件是DOM事件,onDOMContentLoaded是HTML5事件。

②onload事件会被样式表、图像和子框架阻塞,而onDOMContentLoaded不会。

③当加载的脚本内容并不包含立即执行DOM操作时,使用onDOMContentLoaded事件是个更好的选择,会比onload事件执行时间更早。

  • 作者:炙@年
  • 原文链接:https://blog.csdn.net/weixin_49757430/article/details/117091747
    更新时间:2023-04-11 16:16:16