DOMContentLoaded和onload事件区别和兼容

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ws9029/article/details/74346295

最近学习javacript看到个DOMContentLoaded事件，找了下资料看看，为了方便记忆，把学到的记录下来，其实和它和onload是有区别的，DOMContentLoaded事件是当初始HTML文档完全被加载和解析（即所有的DOM完全解析）时触发的，无需要等待样式列表，图片，子框架完成加载，而onload事件它要等页面所有元素，包括图片 以及脚本等全部加载完成才触发，因此它比DOMContentLoaded要更晚执行。

    //onload事件 是所有标签 图片 样式 及脚本加载完成是触发
    window.onload=function(){
        var span=document.querySelector("span");
        console.log(span,"onload");
    }

//DOMContentLoaded事件是所有DOM元素解析完成是触发（HTML文档被完全加载和解析）
//这个要IE9以上才兼容
    document.addEventListener("DOMConetentLoaded",function(){
        var span=document.querySelector("span");
        console.log(span,"DOMConetentLoaded")
})

可以看的出DOMContentLoaded要快比onload要快

    //为了兼容IE9及以下的版本
    document.attachEvent("onreadystatechange",function(){
        var span=document.querySelector("span");
        //这里要判断一下
        if(document.readyState=="complete"){
        console.log(span,"onreadystatechange")
}
})