domReady事件
在w3c浏览器下面，domReady事件==DOMContentLoaded事件，IE浏览器下面没有DOMContentLoaded事件，可以通过IE加载循序使用script+defer属性来实现domReady事件，具体参考下面的代码
基本上每个库都有domReady事件，因为如果要对页面上的元素进行操作，必须等到页面加载了这个元素才行，否则会报错，但是很难判定某个元素是否已加 载，但可以判定页面是否加载，这就是经常把代码放到window.onload = function(){}之中的缘由。但window.onload事件是待到页面上的所有资源被加载才激活，如果页面上有许多图片，音乐或falsh， 而我们要操作的元素在的它们的下方呢？因此，W3C做了少有几桩好事，搞了DOMContentLoaded与addEventListener，可能也 不是他们搞的，把某浏览器的私有实现盖上个大印，标明它是标准罢了，如safari的canvas，IE的 getBoundingClientRect……
DOMContentLoaded是DOM树完成时激活的事件，addEventListener支持多 重加载与冒泡捕获。IE没有这东西，我在《javascript事件加载循序》基本给出它的雏形了（注：昨天重写了该文），本文将在它的基础上进行进一步的封装与改进，如setTimeout改为零秒延迟，清除setTimeout，执行完加载后把加载函数清除掉，对IE框架结构的页面进行更安全的设置……最重要的是修正下面网友 wbkt2t 提到的在IE中的失误！。晚上再次更新，发现doScroll并没有想象中的快，比不上script defer……
IE6的数据：
IE8的数据：
综合执行顺序为：
- oncontentready，这时DOM树完成
- script defer，这时开始执行设定了defer属性的script
- ondocumentready complete，这时可以使用HTC组件与XHR
- html.doScroll 这时可以让HTML元素使用doScroll方法
- window.onload 这时图片flash等资源都加载完毕
new function(){
dom = [];
dom.isReady = false;
dom.isFunction = function(obj){
return Object.prototype.toString.call(obj) === "[object Function]";
}
dom.Ready = function(fn){
dom.initReady();//如果没有建成DOM树，则走第二步，存储起来一起杀
if(dom.isFunction(fn)){
if(dom.isReady){
fn();//如果已经建成DOM，则来一个杀一个
}else{
dom.push(fn);//存储加载事件
}
}
}
dom.fireReady =function(){
if (dom.isReady) return;
dom.isReady = true;
for(var i=0,n=dom.length;i<n;i++){
var fn = dom[i];
fn();
}
dom.length = 0;//清空事件
}
dom.initReady = function(){
if (document.addEventListener) {
document.addEventListener( "DOMContentLoaded", function(){
document.removeEventListener( "DOMContentLoaded", arguments.callee, false );//清除加载函数
dom.fireReady();
}, false );
}else{
if (document.getElementById) {
document.write("<script id=\"ie-domReady\" defer='defer'src=\"//:\"><\/script>");
document.getElementById("ie-domReady").onreadystatechange = function() {
if (this.readyState === "complete") {
dom.fireReady();
this.onreadystatechange = null;
this.parentNode.removeChild(this)
}
};
}
}
}
}
使用方法：
dom.Ready(function(){
alert("我的domReady！")
});
dom.Ready(function(){
alert("我的domReady测试多重加载1！")
});
dom.Ready(function(){
alert("我的domReady测试多重加载2!")
});
dom.Ready(function(){
alert(document.getElementById("test").innerHTML)
});
测试代码
<!doctype html>
<html dir="ltr" lang="zh-CN">
<head id="head">
<meta charset="utf-8"/>
<title>jQuery的domReady </title>
<script type="text/javascript">
new function(){
dom = [];
dom.isReady = false;
dom.isFunction = function(obj){
return Object.prototype.toString.call(obj) === "[object Function]";
}
dom.Ready = function(fn){
dom.initReady();//如果没有建成DOM树，则走第二步，存储起来一起杀
if(dom.isFunction(fn)){
if(dom.isReady){
fn();//如果已经建成DOM，则来一个杀一个
}else{
dom.push(fn);//存储加载事件
}
}
}
dom.fireReady =function(){
if (dom.isReady) return;
dom.isReady = true;
for(var i=0,n=dom.length;i<n;i++){
var fn = dom[i];
fn();
}
dom.length = 0;//清空事件
}
dom.initReady = function(){
if (document.addEventListener) {
document.addEventListener( "DOMContentLoaded", function(){
document.removeEventListener( "DOMContentLoaded", arguments.callee, false );//清除加载函数
dom.fireReady();
}, false );
}else{
if (document.getElementById) {
document.write("<script id=\"ie-domReady\" defer='defer'src=\"//:\"><\/script>");
document.getElementById("ie-domReady").onreadystatechange = function() {
if (this.readyState === "complete") {
dom.fireReady();
this.onreadystatechange = null;
this.parentNode.removeChild(this)
}
};
}
}
}
}
dom.Ready(function(){
alert("我的domReady！")
});
dom.Ready(function(){
alert("我的domReady测试多重加载1！")
});
dom.Ready(function(){
alert("我的domReady测试多重加载2!")
});
dom.Ready(function(){
alert(document.getElementById("test").innerHTML)
});
window.onload = function(){
alert("这是onload事件！")
};
</script>
</head>
<body>
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s005.jpg" alt="图片1" />
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s006.jpg" alt="图片2" />
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s007.jpg" alt="图片3" />
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s008.jpg" alt="图片4" />
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s009.jpg" alt="图片5" />
<table class="filament_table" cellspacing="0" width="700" rules="cols" >
<col class="grey" width="25%"></col>
<col class="yellow"></col>
<thead>
<tr>
<th>
参数
</th>
<th>
描述
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
scrollbarDown
</td>
<td>
Default. Down scroll arrow is at the specified location
</td>
</tr>
<tr>
<td>
scrollbarHThumb
</td>
<td>
Horizontal scroll thumb or box is at the specified location
</td>
</tr>
<tr>
<td>
scrollbarLeft
</td>
<td>
Left scroll arrow is at the specified location
</td>
</tr>
<tr>
<td>
scrollbarPageDown
</td>
<td>
Page-down scroll bar shaft is at the specified location
</td>
</tr>
<tr>
<td>
scrollbarPageLeft
</td>
<td>
Page-left scroll bar shaft is at the specified location
</td>
</tr>
<tr>
<td>
scrollbarPageRight
</td>
<td>
Page-right scroll bar shaft is at the specified location
</td>
</tr>
<tr>
<td>
scrollbarPageUp
</td>
<td>
Page-up scroll bar shaft is at the specified location
</td>
</tr>
<tr>
<td>
scrollbarRight
</td>
<td>
Right scroll arrow is at the specified location
</td>
</tr>
<tr>
<td>
scrollbarUp
</td>
<td>
Up scroll arrow is at the specified location
</td>
</tr>
<tr>
<td>
scrollbarVThumb
</td>
<td>
Vertical scroll thumb or box is at the specified location
</td>
</tr>
<tr>
<td>
down
</td>
<td>
Composite reference to scrollbarDown
</td>
</tr>
<tr>
<td>
left
</td>
<td>
Composite reference to scrollbarLeft
</td>
</tr>
<tr>
<td>
pageDown
</td>
<td>
Composite reference to scrollbarPageDown.
</td>
</tr>
<tr>
<td>
pageLeft
</td>
<td>
Composite reference to scrollbarPageLeft.
</td>
</tr>
<tr>
<td>
pageRight
</td>
<td>
Composite reference to scrollbarPageRight.
</td>
</tr>
<tr>
<td>
pageUp
</td>
<td>
Composite reference to scrollbarPageUp.
</td>
</tr>
<tr>
<td>
right
</td>
<td>
Composite reference to scrollbarRight.
</td>
</tr>
<tr>
<td>
up
</td>
<td>
Composite reference to scrollbarUp.
</td>
</tr>
</tbody>
</table>
<p id="test">我们添加了些图片与表格延缓页面的加载速度</p>
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s015.jpg" alt="图片1" />
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s016.jpg" alt="图片2" />
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s017.jpg" alt="图片3" />
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="图片4" />
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="图片5" />
</body>
</html>
以下，更新前一些有用的东西，舍不得丢弃，暂时还留着。
用于判定是否为顶层window：
//方法一
var topwindow = self === self.top
//方法二
var topwindow = false;
try {
topwindow = window.frameElement == null;
} catch(e){}
推荐第一种，第二种必须要待到document.body形成之时才能用，有关frameElement 的资料详见这里与这里。 frameElement要求当前window是一个 frame 或 iframe才存在，否则返回null。不过第一种要注意一下，在IE 下，top, self, parent 和对应的 window 并不全等。见下面测试：
alert(window === window.top); // 应该为true alert(self === self.top); // 应该为true alert(self === window.top); // 应该为true alert(self === window); // 应该为true alert(window == window.top); // 应该为true alert(typeof self === typeof window); // 应该为true alert(self == window); // 应该为true
一些有用的链接：http://tanny.ica.com/ICA/TKO/test.nsf/DOMContentLoaded.htm
来源：http://www.cnblogs.com/rubylouvre/archive/2009/12/30/1635645.html
加支付宝好友偷能量挖...
