js监听DOM元素加载的优化与解析

js监听DOM元素加载的优化与解析

步骤1：

		//onload会等到dom元素和相关资源加载完毕才会执行
		window.onload = function(ev){
			var demo = document.querySelectorAll("div");
			console.log(1);
			console.log(demo);
		}
		// 通过事件监听执行
		// DOMContentLoaded事件只会等到dom元素加载完毕就会执行
		document.addEventListener("DOMContentLoaded", function(){
				var demo = document.querySelectorAll("div");
				console.log(2);
			 	console.log(demo);
		})

打印结果2在前，说明DOMContentLoaded事件比onload快，但是addEventListener不支持ie9以下浏览器，所以为了兼容性可以使用

步骤2：
高级浏览器中不适用attachEvent

			//通过onreadystatechange专门用于监听document.readyState属性的改变的
			//document.readyState属性返回当前文档的状态（有如下几个状态）：
			/* uninitialized - 还未开始载入
			   loading - 载入中
			   interactive - 已加载，文档与用户可以开始交互
			   complete - 载入完成 */
			document.attachEvent("onreadystatechange", function(){
				if(document.readyState == "complete"){
					console.log("3");
				}
			})

综合得到自己封装的类似jquery中的ready方法：

		ready: function(fn){
			//监听DOM元素是否加载完毕
			if(document.readyState == "complete"){
				fn();
			}
			else if(document.addEventListener){
				document.addEventListener("DOMContentLoaded", function(){
						fn();
				});
			}
			else {
				document.attachEvent("onreadystatechange", function(){
					if(document.readyState == "complete"){
						fn();
					}
				});
			}
		}