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事件执行时间更早。