关于HTML页面DOMContentLoaded和Window.onload区别

这两个事件都是在js原生开发时经常会用到的，比如需要对页面dom进行动态处理，这时就需要用到DOMContentLoaded和window.onload事件，大家都知道，就是在dom构建完毕后，才可以对dom元素进行操作，否则会获取不到相应的dom元素，但是DOMContentLoaded和window.onload还是有很大区别的，DOMContentLoaded在dom构建完成之后就会执行，如果在页面中需要加载其他资源，比如图片、flash等，必须这些资源全部加在完毕后才会执行window.onload，所以DOMContentLoaded是在window.onload之前执行。
Jquery的$(document).ready就是利用了DOMContentLoaded来实现的，大家可以看一些相关的源码，但是DOMContentLoaded在IE9以下不支持，这里需要对IE9以下版本进行兼容处理，具体代码如下：

function domReady(fn) {var d = window.document;if(d.addEventListener) {d.addEventListener('DOMContentLoaded', function() {d.removeEventListener('DOMContentLoaded', arguments.callee, false);fn();}, false)} else if(d.attachEvent) {//http://javascript.nwbox.com/IEContentLoaded/var done = false,// only fire onceinit = function() {if(!done) {done = true;fn();}};// polling for no errors(function() {try {// throws errors until after ondocumentreadyd.documentElement.doScroll('left');} catch(e) {setTimeout(arguments.callee, 50);return;}// no errors, fireinit();})();// trying to always fire before onloadd.onreadystatechange = function() {if(d.readyState == 'complete') {d.onreadystatechange = null;init();}};}}

大家可以去http://javascript.nwbox.com/IEContentLoaded/这里IE官网参考。
这里还有两个问题是关于addEventListener和removeEventListener，大家有没有注意到都是需要三个参数，前两个参数大家肯定都知道，第三个参数是干什么的那？大家看一下图
如果第三个参数为false，事件是在由里向外冒泡过程中触发，如果为true，事件是在由外向里，在事件捕获过程中触发。大家可以写两个嵌套div，都绑定click事件，亲测一下，这里就不写具体代码了，很简单。
在使用removeEventListener方法注销事件时需要注意，移除和绑定用的应该是同一个函数，否则不会起作用，

d.removeEventListener('DOMContentLoaded', arguments.callee, false);

以上是对DOMContentLoaded和window.onload的使用过程中的一些总结，有问题大家可以一起讨论。